querySelector()和querySelectorAll()

在做百度前端任务二的时候，用到querySelector（），特地去查了一下用法。

querySelector()和querySelectorAll()是两个原生的选择符。

querySelector()用于接收一个css选择符，返回与该模式匹配的第一个元素；querySelectorAll()返回所匹配到的所有元素。大家会问已经有getElementById（）和getElementsByTagName（）了吗，这两个新增加的选择符API意义在哪？

对比而言，query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。

静态是指选出的所有元素的数足不会随着文档操作而改变。

用querySelector操作元素示例如下：

HTML代码：

<ul>
<li>111</li>
<li>111</li>
<li>111</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

现在我们可以直观看出两者的区别，当然本身两者的兼容性方面也有区别，此外这两种方法都不能查找伪类元素。