querySelector、querySelectorAll和getElementById、getElementsByTagName()等的区别

在做开发时，
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

这三类我们都熟知是获取元素的基本方式，但是在学习的过程中，也发现了querySelector、querySelectorAll也可以选择元素。

querySelector()是用于接收一个CSS选择符，返回与该模式匹配的第一个元素；querySelectorAll()用于选择匹配到的所有元素。

其中不同的是：
query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。

query选择符,静态的，意思是指选出的所有元素的数组，不会随着文档操作而改变。
用querySelector操作元素示例如下：

<ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
</ul>

var ul = document.querySelector("ul");
        var lis = ul.querySelectorAll("li");
        for(var i =0;i<5;i++){
            ul.appendChild(document.createElement("li"));
        }
        console.log(lis.length); //3 元素的数组没有随着文档的操作而改变

getElement,动态的，意思就是指选出的所有元素的数组，会随着文档的操作而改变。
getElement方法操作如下

<ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
</ul>

var ul = document.getElementsByTagName("ul")[0];
	var lis = ul.getElementsByTagName("li");
    for(var i = 0;i<5;i++){
        ul.appendChild(document.createElement("li"));
    } 
    console.log(lis.length);//  lis.length = 3+5 =8 元素的数组已随着文档操作而改变 

除此之外，这两种方法都不能查找伪类元素！！！！