querySelector和getElementById方法的区别

小灰灰 2022-11-21 09:46 139阅读 0赞

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

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

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

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

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

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

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方法操作如下**

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 元素的数组已随着文档操作而改变

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