querySelector与getElementBy系列方法区别

javascript

首先明确一点querySelector()和querySelectorAll()是原生的选择符。（不要因为它们看起来有query就以为是jQuery的方法）

现在开始谈区别：

• querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

关于Selectors API规范 请点击这里
关于 W3C 的 DOM 规范 请点击这里
- 使用方便程度

这个不详讲相信用过querySelector方法的人都知道querySelector方法比getElementBy系列方法用起来要方便。

• getElementBy系列方法获取的是动态集合，而querySelector获取的是静态集合。

关于动态集合点击这里了解更多

简单来说就是，动态集合选出的元素会随文档改变而改变，但是静态的不会，静态集合在取出来以后元素与文档的改变无关。

举个例子：

HTML部分

<ul>
    <li>a</li>
    <li>d</li>
    <li>c</li>
</ul>

js部分：

var ul = document.getElementsByTagName('ul')[0],
      list = ul.getElementsByTagName("li");
for(var i = 0; i < list.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( list.length);  //6

可以看出来上面的代码在控制台输出list的长度是6，这里输出的长度是当前list的长度，而不是改变前的list长度。

把上面的js代码换成下面的

var ul = document.querySelectorAll('ul'),
      list = ul.querySelectorAll("li");
for(var i = 0; i < list.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( list.length);  //3

这样输出的list长度就是改变前的前的list长度可以看出静态集合取出来以后与之后文档的改变是没有关系的。

• 性能不同：

  在这里我拿一个别人测试过的例子来展示一下：

  console.time('querySelector');
  for (var i = 0; i < 100000; i++) {
    document.querySelector("#wp_editbtns");
  }
  console.timeEnd('querySelector');
  //querySelector: 519ms
  
  console.time('getElementById');
  for (var i = 0; i < 100000; i++) {
    document.getElementById("wp_editbtns");
  }
  console.timeEnd('getElementById');
  //getElementById: 491ms
  
  console.time('querySelectorAll');
  for (var i = 0; i < 10000; i++) {
    document.querySelectorAll(".menu-top");
  }
  console.timeEnd('querySelectorAll');
  //querySelectorAll: 1781ms
  
  console.time('getElementsByClassName');
  for (var i = 0; i < 10000; i++) {
    document.getElementsByClassName("menu-top");
  }
  console.timeEnd('getElementsByClassName');
  //getElementsByClassName: 54ms
  

例子来自querySelector和getElementById性能分析与使用选择

通过例子不难看出来无论是得到单个节点还是一个节点集合使用与getElementBy系列方法的性能都要好一些。

总结：

如果查找元素次数不多的话尽量使用getElementBy系列方法（因为性能高）。如果查找元素次数比较多的话就使用querySelector方法（因为方便）。关于这两种方法的取舍关键在于你看重效率还是图使用方便。