1、区别
getXXXByXXX 获取的是动态集合,querySelector获取的是静态集合。
简单的说就是,动态就是选出的元素会随文档改变,静态的不会,取出来之后就和文档的改变无关了。
先看看一个例子:
<ul>
<li>aaa</li>
<li>ddd</li>
<li>ccc</li>
</ul>
//demo1
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
console.log( lis.length); //6
//demo2
var ul = document.querySelectorAll('ul'),
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
console.log( lis.length); //3
Demo1 中的 lis 是一个动态的 Node List, 每一次调用 lis 都会重新对文档进行查询,导致无限循环的问题。
2、性能
这里就不多讲了,大家可以参考:
https://jsperf.com/getelementsby-vs-queryselectorall/7
3、querySelector和querySelectorAll()
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
4、总结
如果只要一次查找就可得到元素时,首选getXXXByXXX ;
如果需要经过多级查找,才能得到元素时,首选querySelector;
原文地址:https://www.cnblogs.com/leaf930814/p/6660305.html