对于getElementBy系列和query系列选择元素的区别
1.主要区别在于querySelectorAll比getElementBy系列速度慢
因为querySelectorAll返回一个静态的NodeList(深克隆)
getElementBy系列返回一个动态的实时变化的NodeList(HTMLCollection)(浅克隆,每次都返回一个指针)
所以querySelectorAll会降低性能
什么叫静态的?
意思是指选出的所有元素的数组,不会随着文档操作而改变。
用querySelector操作元素示例如下:
<ul>
<li>1</li>
<li>2</li>
<li>3</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
//这里的循环判断语句不能写list.length 因为getElement方法是动态的
//所以这里他会跟着你在ul里添加li元素随之增加,导致这个循环无法结束
还有一点
querySelector和querySelectorAll的参数必须是符合 css selector 的字符串:它传入的字符串中第一个字符不能是数字.