querySelector，querySelectorAll与getElementByxxx

querySelector(只能获取到一个，若没有返null)
querySelectorAll(获取所有，若没有返[ ])

通过querySelectorAll得到的集合是静态的，类似于一个快照，而是用getElementsByClassName得到的是动态的集合，也就是说每一次调用都会去对dom节点进行一次查询。

做个例子：

var ul = document.getElementById('ul');
var lits = ul.getElementsByTagName('li')
for(var i = 0; i < lits.length; i++){
    ul.appendChild(document.createElement('li'))
}

上述代码会无限循环造成卡死，原因是因为每一次for循环中，在ul内增加了新一条的li，下次的for循环length都会因为动态的dom查询而自增1，导致无限循环。

var ul = document.querySelector('#ul')
var lis = ul.querySelectorAll('#ul li')
for(var i = 0; i < lis.length; i ++){
    ul.appendChild(document.createElement('li'))
}

这段代码不会造成卡死，由于是静态的集合，若有3个li，lis的长度一直会维持在3这个数字，最终出来的是六个li。

var x1 = document.querySelector('#id').querySelectorAll('.class')

搜索id为id的dom元素下的所有class名字为class的dom元素

<ul id="ul">
    <li class="li" data-a="1">data 1</li>
    <li class="li">data 2</li>
    <li class="li">data 3</li>
</ul>
var a = document.querySelectorAll('.li[data-a]')
console.log(a)

最终得到的是第一个li的nodeList集合