第JavaScript選擇器函數(shù)querySelector和querySelectorAll2.Element實(shí)例調(diào)用

Element實(shí)例調(diào)用是獲取該元素子樹內(nèi)匹配的元素。

簡單示例：

//獲取ID為container的元素

letcontainer=document.querySelector("#container");

//需要檢測元素對象是否存在，存在才有querySelector方法

if(container){

//只查找container內(nèi)class包含btn的元素。

letcontainerBtn=container.querySelector(".btn");

console.log(containerBtn);

}

理論上來講，因?yàn)镃ss可以通過選擇器獲取頁面任意的元素，所以Element實(shí)例調(diào)用可以直接寫成Document實(shí)例的調(diào)用方式，只需要修改選擇器字符串參數(shù)即可。

例如上例就可以直接寫成如下方式：

letcontainerBtn=document.querySelector("#container.btn");

并且因?yàn)樯倭艘粋€if判斷，代碼就更加簡潔。當(dāng)然在有些業(yè)務(wù)場景下，ELement實(shí)例是已經(jīng)確定的了，那么直接用ELement實(shí)例調(diào)用就更加方便了。

二、querySelectorAll查詢所有元素

querySelectorAll方法和querySelector方法類似，只是它是返回所有匹配的元素，類型是NodeList。

簡單示例：

//假設(shè)頁面有兩個div類名包含article

//獲取所有類包含article的元素

letarticleList=document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length);

//控制臺輸出：

//NodeList(2)[div.article,div.article]

//2

querySelectorAll方法返回的是所有元素，在實(shí)務(wù)中經(jīng)常需要遍歷，遍歷可以使用常規(guī)的for遍歷、forof遍歷和forEach遍歷。

//forof遍歷

for(letitemofarticleList){

console.log(item);

//for遍歷

for(leti=0;iarticleList.length;i++){

console.log(articleList[i]);

console.log(articleList.item(i));

//forEach遍歷

articleList.forEach((item,index)={

console.log(item,index);

});

1、forin遍歷的問題

如果使用forin遍歷，則會把原型鏈上的一些方法也遍歷出來，如entries，forEach等。

2、快照而非實(shí)時的問題

使用querySelectorAll方法獲取的NodeList是快照，而非實(shí)時的數(shù)據(jù)。

請看下面這個例子：

//使用querySelectorAll獲取，articleList是靜態(tài)的，非實(shí)時的

letarticleList=document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length);//2

setTimeout(()={

//增加一個元素

letdiv=document.createElement("div");

div.className="article";

document.body.appendChild(div);

console.log(articleList);

//依舊為2

console.log(articleList.length);

},0);

最后設(shè)置了一個定時器，往頁面塞了一個class為article的div元素，但是articleList的長度依舊是2。

如果是用getElementsByClassName獲取，那么articleList就是實(shí)時的數(shù)據(jù)。

請看如下例子：

//使用getElementsByClassName獲取，articleList是實(shí)時的

letarticleLi