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/