Hello World!
資訊專欄INFORMATION COLUMN
摘要：在年的中新增了兩個(gè)和。其中返回的是單個(gè)元素，而返回的是匹配到的所有組成的。這里分別在這個(gè)元素和上調(diào)用了可以看出，使用在上的是被限制在該的范圍內(nèi)的，而在上調(diào)用的則會(huì)在全局中尋找符合條件的元素。但結(jié)果其實(shí)是選擇器正確的拿到了我們要找的，的值為。
W3C在07年的Selectors API中新增了兩個(gè)API —— querySelector和querySelectorAll。這兩個(gè)API在文檔中的描述如下：
partial interface Document {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};
partial interface DocumentFragment {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};
partial interface Element {
Element? querySelector(DOMString selectors);
NodeList querySelectorAll(DOMString selectors);
};
從接口定義中就可以看出，Document，DocumentFragment和Element都支持querySelector和querySelectorAll。其中querySelector返回的是單個(gè)元素，而querySelectorAll返回的是匹配到的所有DOM組成的NodeList。
構(gòu)想一下下面的HTML結(jié)構(gòu)：
JS Bin LeverHello World!
現(xiàn)在試著用querySelector和querySelectorAll來處理DOM。
const container = document.querySelector("#container")
const name1 = container.querySelector(".name").innerText
const name2 = document.querySelector("#container > .name").innerText
console.log(name1, name2) // Lever Lever
這里分別在"#container"這個(gè)元素和document上調(diào)用了querySelector,可以看出，使用在Element上的querySelector是被限制在該Element的范圍內(nèi)的，而在document上調(diào)用的querySelector則會(huì)在全局中尋找符合條件的元素。
const name3 = container.querySelector(".container > .name").innerText
現(xiàn)在猜猜，name3會(huì)輸出什么。如果經(jīng)常使用jQuery的話，很容易認(rèn)為這樣的選擇器不會(huì)匹配到任何DOM，因?yàn)樵凇?container”的子元素中沒有匹配的DOM。但結(jié)果其實(shí)是選擇器正確的拿到了我們要找的DOM，name3的值為“Lever”。
不要懷疑，這不是瀏覽器的bug，規(guī)范中是這樣描述的：
Even though the method is invoked on an element, selectors are still evaluated in the context of the entire document. In the following example, the method will still match the div element"s child p element, even though the body element is not a descendant of the div element itself.
var div = document.getElementById("bar");
var p = div.querySelector("body p");
按照規(guī)范的意思，在Element下的querySelector同樣會(huì)在整個(gè)document下尋找符合條件的選擇器，然后才會(huì)將結(jié)果中屬于Element子樹的DOM截取出來。
這樣看來，也就能解釋為什么獲取name3的選擇器仍然會(huì)起作用了。
還需要注意的是，通過querySelectorAll選取出來的NodeList是靜態(tài)的，因此任何對(duì)DOM的增刪改的操作，不會(huì)影響到已經(jīng)查詢出來的NodeList的結(jié)果。
與本文的相關(guān)代碼都放到了JSBin上。
參考資料：Selectors API Level 1
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81522.html
摘要：而事實(shí)上，它會(huì)在的子代元素中匹配查詢條件。它們并不會(huì)相對(duì)于任何特定的元素，甚至不會(huì)相對(duì)于調(diào)用的元素。偽選擇器是相對(duì)當(dāng)前作用域進(jìn)行匹配的。它們是和的替代方法，存在父節(jié)點(diǎn)上。了解像這些坑很重要，因?yàn)閺乃鼈兊男袨橹泻茈y了解它們的實(shí)質(zhì)特性。 原文鏈接地址：http://blog.lxjwlt.com/front-...筆者整理筆記： 1.API介紹 先看看MDN上怎么介紹這個(gè)API的：概述返回...
摘要：瀏覽器原生提供的幾個(gè)找到元素的方法為網(wǎng)頁全局唯一。匹配包含的元素匹配包含和的元素級(jí)聯(lián)用法和相似返回一個(gè)。以上返回?cái)?shù)組的方法，返回的都是的。 那是個(gè)夜黑風(fēng)高的夜晚，我遇到了一個(gè)按鈕： 搜索 嗯，我要選中它，我敲下了一行代碼： const submitButton = document.querySelector(button[type=submit]); 這對(duì)于精通 document.q...
摘要：實(shí)際上，的核心就是通過選擇符查詢文檔取得元素的引用。方法該方法接收一個(gè)選擇符，返回的是所有匹配的元素而不僅僅是一個(gè)元素。而其底層實(shí)現(xiàn)則類似于一組元素的快照，而非不斷對(duì)文檔進(jìn)行搜索的動(dòng)態(tài)查詢。 選擇符API Selector API Level1 的核心就是兩個(gè)方法：querySelector()和querySelectorAll()。實(shí)際上，jQuery的核心就是通過CSS選擇符查詢D...
摘要：我們可以通過來檢查某個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)。通過可以用來取得父元素，返回值可能會(huì)是一個(gè)元素節(jié)點(diǎn)根節(jié)點(diǎn)或節(jié)點(diǎn)。與類似，通過可以取得同層之間的下一個(gè)節(jié)點(diǎn)，如果已經(jīng)是最后一個(gè)節(jié)點(diǎn)，則返回。在上一篇的分享當(dāng)中，我們簡單介紹了BOM 與DOM，也了解到JavaScript 是怎么通過它們提供的方法來與瀏覽器進(jìn)行溝通。 當(dāng)一個(gè)網(wǎng)頁被載入到瀏覽器時(shí)，瀏覽器會(huì)首先分析這個(gè)HTML 文檔，然后會(huì)依照這份HTML ...
閱讀 2766·2021-11-11 16:54
閱讀 2404·2021-10-09 09:44
閱讀 2668·2019-08-30 15:54
閱讀 1986·2019-08-30 11:24
閱讀 1250·2019-08-29 17:03
閱讀 2168·2019-08-29 16:22
閱讀 2144·2019-08-29 13:11
閱讀 1116·2019-08-29 12:14
