JavaScript選擇器函數(shù)querySelector和querySelectorAll

更新時(shí)間：2021年11月24日 17:22:01 作者：快樂(lè)編程

這篇文章主要介紹了?JavaScript選擇器函數(shù)querySelector和querySelectorAll，下面文章圍繞querySelector和querySelectorAll的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下

一、querySelector查詢(xún)單個(gè)元素

querySelector用于查詢(xún)頁(yè)面中第一個(gè)符合規(guī)則的元素，可以在Document實(shí)例和Element實(shí)例上調(diào)用，接收一個(gè)選擇器字符串參數(shù)，如果查找到則返回 HTMLElement 對(duì)象，否則返回null。

語(yǔ)法格式如下：

Document實(shí)例.querySelector(選擇器字符串);

Element實(shí)例.querySelector(選擇器字符串);

1. Document實(shí)例調(diào)用

Document實(shí)例調(diào)用是獲取整個(gè)頁(yè)面匹配的元素。

簡(jiǎn)單示例如下：

// 獲取body元素

let body = document.querySelector("body");

console.log(body)

// 獲取id為container的元素，只會(huì)獲取第一個(gè)

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

console.log(container)

// 獲取class中包含btn的元素，只會(huì)獲取第一個(gè)

let btn = document.querySelector(".btn");

console.log(btn);



// 獲取container直接子類(lèi)class中包含btn的元素，只會(huì)獲取第一個(gè)

let containerBtn = document.querySelector("#container>.btn");

console.log(containerBtn);

2. Element實(shí)例調(diào)用

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

簡(jiǎn)單示例：

// 獲取ID為container的元素

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

// 需要檢測(cè)元素對(duì)象是否存在，存在才有 querySelector 方法

if (container) {

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

	let containerBtn = container.querySelector(".btn");

	console.log(containerBtn);

}

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

例如上例就可以直接寫(xiě)成如下方式：

let containerBtn = document.querySelector("#container .btn");

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

二、querySelectorAll查詢(xún)所有元素

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

簡(jiǎn)單示例：

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

// 獲取所有類(lèi)包含 article 的元素

let articleList = document.querySelectorAll(".article");

console.log(articleList);

console.log(articleList.length);

// 控制臺(tái)輸出：

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

//	2

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

// for of 遍歷

for (let item of articleList) {

	console.log(item);

}

// for 遍歷

for (let i = 0; i < articleList.length; i++) {

	console.log(articleList[i]);

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

}

// forEach 遍歷

articleList.forEach((item, index) => {

	console.log(item, index);

});

1、for in遍歷的問(wèn)題

如果使用for in遍歷，則會(huì)把原型鏈上的一些方法也遍歷出來(lái)，如entries，forEach等。

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

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

請(qǐng)看下面這個(gè)例子：

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

let articleList = document.querySelectorAll(".article");

console.log(articleList);

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

setTimeout(() => {

	// 增加一個(gè)元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);	

	console.log(articleList);

	// 依舊為2

	console.log(articleList.length);

}, 0);

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

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

請(qǐng)看如下例子：

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

let articleList = document.getElementsByClassName("article");

console.log(articleList);

console.log(articleList.length);



setTimeout(() => {

	// 增加一個(gè)元素

	let div = document.createElement("div");

	div.className = "article";

	document.body.appendChild(div);

	

	console.log(articleList);

	// 這里為3

	console.log(articleList.length);

}, 0);

在控制臺(tái)查看打印結(jié)果：

HTMLCollection動(dòng)態(tài)效果：

使用 getElementsByClassName 獲取的對(duì)象是 HTMLCollection 類(lèi)型，會(huì)隨文檔流變化而變化。? ? ? ? ? ? ? ? ??

三、小結(jié)

1. querySelector和querySelectorAll根據(jù)Css選擇器獲取頁(yè)面元素，功能很強(qiáng)大。
2. querySelectorAll獲取的元素是快照，靜態(tài)的，而非實(shí)時(shí)的，注意踩坑。

到此這篇關(guān)于 JavaScript選擇器函數(shù)querySelector和querySelectorAll的文章就介紹到這了,更多相關(guān) JavaScript中的querySelector和querySelectorAll內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: