DOM常用操作，Sass基础

一个元素的子元素个数
ParentNode.childElementCount 只读属性返回一个无符号长整型数字，表示给定元素的子元素数。

取消当前事件
e.preventDefault();
有时候我们选了一个checkBox，然后因为不能全部选中，就会取消此次点击事件。

CSS属性选择器
<input checkboxtype = "ddd">
document.querySelector("[checkboxtype]")
返回包含checkboxtype属性的第一个标签。

判断标签名
element.tagName;

获取标签自定义的属性
<p box="666"></p>
element.getAttribute("box"));// 这里box是自定义属性，他的值是666。

checkbox点击事件发生后，checkbox的checked状态立即变为true，但是此时的勾是没有打上的，因为画面是最后渲染的。

webpack 打包工具
Node.js 是运行在服务端的 JavaScript
less 轻量级的css模块
sass 让css声明的更简单，清晰。
sass嵌套：
#content div {
color: red;
background: blue;
}
#content div:hover {
color: yellow;
background: green;
}
#content > p {
border : 1px solid #000;
border-left: 10px;
border-right: 5px;
}
用sass可以合起来写成
#content {
div {
color: red;
background: blue;
&:hover {
color: yellow;
background: green;
}
}
> p {
border : 1px solid #000; {
left: 10px;
right: 5px;
}
}
}

sass导入：
有一个名为_blue-theme.scss的局部文件，内容如下：
aside {
background: blue;
color: white;
}
下面是导入语法：
.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
aside {
background: blue;
color: #fff;
}
}

你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
在下面例子中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，
那么你的局部文件中对$fancybox-width赋值400px的操作就无效。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

sass注释：
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

sass混合器
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
@include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

sass继承
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。
以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"