Element.querySelector()選擇元素出乎意料的情況(選不准)


Element.querySelector方法接受CSS選擇器作為參數,返回父元素的第一個匹配的子元素。如

let content = document.getElementById('content');
let el = content.querySelector('p');

上面代碼返回content節點的第一個p元素。

 

而出乎意料的情況呢?

下面是HTML代碼:

<div>
<blockquote id="outer">
  <p>Hello</p>
  <div id="inner">
    <p>World</p>
  </div>
</blockquote>
</div>

JS選擇元素代碼:

let outer = document.getElementById('outer');
outer.querySelector('div p')
// <p>Hello</p>

運行后發現,代碼實際上會返回第一個p元素,而不是第二個。

原因就是:

瀏覽器執行querySelector方法時,是先在全局范圍內搜索給定的CSS選擇器,然后過濾出哪些屬於當前元素的子元素。因此,會有一些違反直覺的結果。CSS選擇器先選擇div時選到的是outer外的<div>然后選中了outer內的第一個p, 也就是<p>Hello</p>。正好<p>Hello</p>在outer內,滿足是outer的子元素的要求,瀏覽器就返回了。

阮一峰的 JavaScript標准參考教程 中有詳細的DOM選擇器的介紹 http://javascript.ruanyifeng.com/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM