querySelector 相比 getElementsBy

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

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

querySelector

   
111
   
222
   
333
 
var ul=document.querySelector('ul'); 
var list=ul.querySelectorAll('li');
for(var i=0;i

getElement

   
111
   
222
   
333
 
var ul=document.getElementsByTagName('ul')[0]; 
var list=ul.getElementsByTagName('li');
for(var i=0;i

• 性能相差大，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选择器多种选择器供你使用）