奇怪的querySelector和querySelectorAll

klinson 發(fā)布于2019-08-20 14:18 / 3371人閱讀

摘要：在年的中新增了兩個和。其中返回的是單個元素，而返回的是匹配到的所有組成的。這里分別在這個元素和上調(diào)用了可以看出，使用在上的是被限制在該的范圍內(nèi)的，而在上調(diào)用的則會在全局中尋找符合條件的元素。但結果其實是選擇器正確的拿到了我們要找的，的值為。

W3C在07年的Selectors API中新增了兩個API —— querySelector和querySelectorAll。這兩個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返回的是單個元素，而querySelectorAll返回的是匹配到的所有DOM組成的NodeList。

構想一下下面的HTML結構：




  
  
  JS Bin


  
    Lever
    
      Hello 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"這個元素和document上調(diào)用了querySelector,可以看出，使用在Element上的querySelector是被限制在該Element的范圍內(nèi)的，而在document上調(diào)用的querySelector則會在全局中尋找符合條件的元素。

const name3 = container.querySelector(".container > .name").innerText

現(xiàn)在猜猜，name3會輸出什么。如果經(jīng)常使用jQuery的話，很容易認為這樣的選擇器不會匹配到任何DOM，因為在“#container”的子元素中沒有匹配的DOM。但結果其實是選擇器正確的拿到了我們要找的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同樣會在整個document下尋找符合條件的選擇器，然后才會將結果中屬于Element子樹的DOM截取出來。

這樣看來，也就能解釋為什么獲取name3的選擇器仍然會起作用了。

還需要注意的是，通過querySelectorAll選取出來的NodeList是靜態(tài)的，因此任何對DOM的增刪改的操作，不會影響到已經(jīng)查詢出來的NodeList的結果。

與本文的相關代碼都放到了JSBin上。

參考資料：Selectors API Level 1

GPU云服務器云服務器那些奇怪的錯誤奇怪的編程語言奇怪的創(chuàng)意人 querySelector

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81522.html

你所不了解的querySelector

摘要：而事實上，它會在的子代元素中匹配查詢條件。它們并不會相對于任何特定的元素，甚至不會相對于調(diào)用的元素。偽選擇器是相對當前作用域進行匹配的。它們是和的替代方法，存在父節(jié)點上。了解像這些坑很重要，因為從它們的行為中很難了解它們的實質(zhì)特性。原文鏈接地址：http://blog.lxjwlt.com/front-...筆者整理筆記： 1.API介紹先看看MDN上怎么介紹這個API的：概述返回...

freewolf 2019-08-20 11:39 評論0 收藏0
獲取網(wǎng)頁指定元素的原生方法回顧

摘要：瀏覽器原生提供的幾個找到元素的方法為網(wǎng)頁全局唯一。匹配包含的元素匹配包含和的元素級聯(lián)用法和相似返回一個。以上返回數(shù)組的方法，返回的都是的。那是個夜黑風高的夜晚，我遇到了一個按鈕：搜索嗯，我要選中它，我敲下了一行代碼： const submitButton = document.querySelector(button[type=submit]); 這對于精通 document.q...

URLOS 2019-08-21 17:02 評論0 收藏0
JavaScript DOM擴展——“選擇符API和元素遍歷”的注意要點

摘要：實際上，的核心就是通過選擇符查詢文檔取得元素的引用。方法該方法接收一個選擇符，返回的是所有匹配的元素而不僅僅是一個元素。而其底層實現(xiàn)則類似于一組元素的快照，而非不斷對文檔進行搜索的動態(tài)查詢。選擇符API Selector API Level1 的核心就是兩個方法：querySelector()和querySelectorAll()。實際上，jQuery的核心就是通過CSS選擇符查詢D...

justCoding 2019-08-19 17:13 評論0 收藏0
通過DOM API 查找節(jié)點

摘要：我們可以通過來檢查某個節(jié)點是否有子節(jié)點。通過可以用來取得父元素，返回值可能會是一個元素節(jié)點根節(jié)點或節(jié)點。與類似，通過可以取得同層之間的下一個節(jié)點，如果已經(jīng)是最后一個節(jié)點，則返回。在上一篇的分享當中，我們簡單介紹了BOM 與DOM，也了解到JavaScript 是怎么通過它們提供的方法來與瀏覽器進行溝通。當一個網(wǎng)頁被載入到瀏覽器時，瀏覽器會首先分析這個HTML 文檔，然后會依照這份HTML ...

shengguo 2019-05-23 17:26 評論0 收藏0