getElement和querySelect(All)的区别

对于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 的字符串：它传入的字符串中第一个字符不能是数字.