首先明确一点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方法(因为方便)。关于这两种方法的取舍关键在于你看重效率还是图使用方便。