JavaScript選擇器函數(shù)querySelector和querySelectorAll
選擇器是Css
非常強(qiáng)大的功能,早先一般是通過(guò)getElementById
和getElementsByTagName
來(lái)獲取頁(yè)面元素,在一些場(chǎng)景下就很不方便。
后來(lái)DOM擴(kuò)展出了Selector API
標(biāo)準(zhǔn),其中 Selector API Level 1
包含了querySelector
和querySelectorAll
兩個(gè)方法,可以通過(guò)Css選擇器匹配頁(yè)面元素。
一、querySelector查詢單個(gè)元素
querySelector
用于查詢頁(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直接子類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查詢所有元素
querySelectorAll
方法和querySelector
方法類似,只是它是返回所有匹配的元素,類型是NodeList
。
簡(jiǎn)單示例:
// 假設(shè)頁(yè)面有兩個(gè)div類名包含 article // 獲取所有類包含 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
類型,會(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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序 wxapp內(nèi)容組件 progress詳細(xì)介紹
這篇文章主要介紹了微信小程序 wxapp內(nèi)容組件 progress詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10Vue.js React與Angular流行前端框架優(yōu)勢(shì)對(duì)比
這篇文章主要為大家介紹了Vue.js React與Angular流行前端框架優(yōu)勢(shì)對(duì)比,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03js基礎(chǔ)語(yǔ)法與maven項(xiàng)目配置教程案例
本篇文章介紹了幾個(gè)javascript的基本語(yǔ)法和maven的配置教程。想學(xué)習(xí)javascript和maven的朋友們可以參考一下,希望能給你帶來(lái)幫助2021-07-07使用?render?函數(shù)封裝高擴(kuò)展的組件
這篇文章主要介紹了使用?render?函數(shù)封裝高擴(kuò)展的組件,vue?官網(wǎng)給出的?render?函數(shù)的例子只能體現(xiàn)?render?函數(shù)的優(yōu)雅的一方面,卻不能看出其擴(kuò)展性,今天就來(lái)封裝一個(gè)體現(xiàn)其擴(kuò)展性的組件,需要的朋友可以參考一下2021-12-12詳解微信小程序如何實(shí)現(xiàn)類似ChatGPT的流式傳輸
這篇文章主要為大家介紹了微信小程序如何實(shí)現(xiàn)類似ChatGPT的流式傳輸示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03一文了解JavaScript用Element?Traversal新屬性遍歷子元素
這篇文章主要介紹了一文了解JavaScript用Element?Traversal新屬性遍歷子元素,文章圍繞Element?Traversal新屬性的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下,希望對(duì)大家有所幫助2021-11-11幫你提高開(kāi)發(fā)效率的JavaScript20個(gè)技巧
JavaScript確實(shí)是一門(mén)很好的開(kāi)發(fā)語(yǔ)言。對(duì)于給定的問(wèn)題,可以有不止一種方法來(lái)達(dá)到相同的解決方案。在這篇文章中,我們將討論最快速的方法2021-06-06