querySelector和getElementById方法的区别
JS原生的DOM选择符想必大家应该都清楚,例如getElementById()之类的都属于常用的选择符,但是今天在看别人的代码的时候,又发现了两个原生的选择符——querySelector()和querySelectorAll()。其实也不是今天才知道这两个方法,之前就看别人用过很多次了,但是那时还以为是Jquery专用的选择符,谁让他们都有个query呢……
然后我就去查文档,发现querySelector()是用于接收一个CSS选择符,返回与该模式匹配的第一个元素;querySelectorAll()用于选择匹配到的所有元素。
完了看到这我就有点懵,所以这俩有什么用呢?不是已经有了getElementById()和getElementsByTagName()了吗,这两个新添加的选择符API意义何在?
查了《高程》并没有找到答案,最后还是百度了一堆资料,终于算是搞懂了。
简单的说,query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。
什么叫静态的?意思是指选出的所有元素的数组,不会随着文档操作而改变。
用querySelector操作元素示例如下:
HTML代码:
<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方法
var ul=document.getElementsByTagName('ul')[0];
var list=ul.getElementsByTagName('li');
for(var i=0;i<5;i++){
ul.appendChild(document.createElement('li'));
}
console.log(list.length)//此时输出的结果就是3+5=8
所以我们现在应该可以很直观的分别出两者的区别,当然本身两种方法还有兼容性方面的区别。另外这两种方法都不能查找伪类元素。
以上也算是学到的一点新知识,虽然估计很多人都知道,但是也是记录下来增强下自己的记忆。
本文来自学习小花,作者:aixuexi666888,转载请注明原文链接:https://www.cnblogs.com/aixuexi666888/p/15528076.html