querySelector 相比 getElementsBy

• getElementsBy 返回的是一个HTML Collection，querySelectorAll返回一个Node list，主要不同在于HTMLCollection是元素集合而NodeList是节点集合（即可以包含元素，也可以包含文本节点）。

• getElementsBy 返回静态的，querySelector则返回动态的

querySelector

<ul>
   <li>111</li>
   <li>222</li>
   <li>333</li>
 </ul>
var ul=document.querySelector('ul'); 
var list=ul.querySelectorAll('li');
for(var i=0;i<list.length;i++){ 
            ul.appendChild(document.createElement('li'));
 }//这个时候就创建了3个新的li，添加在ul列表上。 
console.log(list.length) //输出的结果仍然是3，不是此时li的数量6

getElement

<ul>
   <li>111</li>
   <li>222</li>
   <li>333</li>
 </ul>
var ul=document.getElementsByTagName('ul')[0]; 
var list=ul.getElementsByTagName('li');
for(var i=0;i<list.length;i++){ 
            ul.appendChild(document.createElement('li'));
 }//这个时候就创建了3个新的li，添加在ul列表上。 
console.log(list.length)//此时输出的结果就是3+5=8

• 性能相差大，getElement要快得多

console.time('querySelectorAll');
for (var i = 0; i < 10000; i++) {
  document.querySelectorAll(".sfj");
}
console.timeEnd('querySelectorAll');
-> VM89:5 querySelectorAll: 6.911ms
->undefined
console.time('getElements');
for (var i = 0; i < 10000; i++) {
  document.getElementsByClassName(".sfj")[0];
}
console.timeEnd('getElements');
->VM114:5 getElements: 2.775ms
->undefined

• 参数类型
  querySelectorAll 方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。

总结：如果不是多次getElement的话，尽量使用getElement，反之则可以使用querySelector（毕竟css3选择器多种选择器供你使用）