querySelector跟原始的getElementById的一些区别

用惯了jq的选择器以及原始的getElementById以及getElementsByClassName，有些不大懂querySelector以及querySelectorAll。正好趁着晚上有空查了点资料。

大致看了看，说的最多的差别其实还是静态HTMLCollection和动态HTMLCollection的差别。（其中querySelector得到的是第一个匹配的dom元素，并不是HTMLCollection）

通过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'))
    }

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

注：就算是用querySelectorAll来选择唯一的id元素，出来的也一样是一个数组。

另外附加一些其他的用法：

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

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

同时也并不局限于id和class的搜索。例：

<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集合