04-querySelector 和 getElementByXXX 的区别
先说总结：
querySelector获取的是静态集合，且返回的是NodeList，NodeList是包含了注释，换行等节点的信息。getElementsByXXX获取的是动态集合，且返回的是HTMLCollection，HTMLCollection只包含元素。
- 正是因为nodeList是包含所有的节点信息，HTMLCollection只包含元素信息，所以性能上 getElementsByXXX 是要比 querySelector 要高的，但是因为querySelector选择器可以获取类名，标签名，属性原则器，还能像CSS选择器那样连写等等，就很方便，所以现在就非常常用，之前最早是用于移动端，webkit内核这种，IE不兼容，性能虽然比byXXX这种要差一点，但是现在的设备性能完全足够，IE也已经成为历史产物，所以还是以querySelector选择器成为主流。
下面主要说明一下querySelector的静态和getElementsByXXX的动态是什么意思：
<body>
<ul>
<li>aaa</li>
<li>ddd</li>
<li>ccc</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</body>
<script>
// getElementsByXXX的动态属性的 demo1
var ul = document.getElementsByTagName("ul")[0];
var list = ul.getElementsByTagName("li");
for (var i = 0; i < 3; i++) { //这里我们写成固定的3
ul.appendChild(document.createElement("li"));
}
// 这时创建了3个新li，添加在ul列表中
console.log(list.length); // 输出6;
// getElementsByXXX的动态属性的 demo2
var ul = document.getElementsByTagName("ul")[0];
var lis = ul.getElementsByTagName("li");
// 这里循环的中止条件是数组的长度，因为其动态添加的特性，每添加一个数组的长度就会++, 那么循环就一直打不破了。
for (var i = 0; i < lis.length; i++) {
ul.appendChild(document.createElement("li"));
}
console.log(lis.length); // 输出不出来，因为死循环了
// querySelector的静态属性说明的 demo1
var ul2 = document.querySelector("ol");
var list2 = ul2.querySelectorAll("li");
for (var i = 0; i < 3; i++) {
ul2.appendChild(document.createElement("li"));
}
//这时创建了3个新li，添加在ul列表中
console.log(list2.length); //输出3，输出的是添加前li的数量，而非此时li的总数量6
// querySelector的静态属性说明的 demo2
var ul2 = document.querySelector("ol");
var list2 = ul2.querySelectorAll("li");
// 这里循环的中止条件也是数组的长度，但是因为li虽然添加了，但是由于li这个集合是静态的，还是原来页面上的三个，所以就不会像上面动态那样造成死循环
for (var i = 0; i < list2.length; i++) {
ul2.appendChild(document.createElement("li"));
}
//这时创建了3个新li，添加在ul列表中
console.log(list2.length); //输出3，输出的是添加前li的数量，而非此时li的总数量6
// 只有再重新获取一遍才能得到最新的li集合
console.log(ul2.querySelectorAll("li").length);
</script>
- 综上，动态和静态的区别就好像 我们的对象对应一个内存地址，并且把这个内存地址赋值给了另外一个对象，其中一个改变了，内存地址中的值也会发生改变，是联动的。静态的就好像我们的基本数据类型，把值赋值给另外一个变量，另外一个变量改变了值得话，原来得变量得值不会改变。简单点说：动态静态就是一个数据联动与不联动的区别
