querySelector和getElementById方法的区别

JS原生的DOM选择符想必大家应该都清楚，例如getElementById()之类的都属于常用的选择符，但是今天在看别人的代码的时候，又发现了两个原生的选择符——querySelector()和querySelectorAll()。其实也不是今天才知道这两个方法，之前就看别人用过很多次了，但是那时还以为是Jquery专用的选择符，谁让他们都有个query呢……
然后我就去查文档，发现querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素；querySelectorAll()用于选择匹配到的所有元素。
完了看到这我就有点懵，所以这俩有什么用呢？不是已经有了getElementById()和getElementsByTagName()了吗，这两个新添加的选择符API意义何在？
查了《高程》并没有找到答案，最后还是百度了一堆资料，终于算是搞懂了。
简单的说，query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。
什么叫静态的？意思是指选出的所有元素的数组，不会随着文档操作而改变。
用querySelector操作元素示例如下：
HTML代码：

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

所以我们现在应该可以很直观的分别出两者的区别，当然本身两种方法还有兼容性方面的区别。另外这两种方法都不能查找伪类元素。
以上也算是学到的一点新知识，虽然估计很多人都知道，但是也是记录下来增强下自己的记忆。