querySelector()和querySelectorAll()

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

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