鑒于以下標記（為了簡潔起見，我只包含了相關部分）
<ul>
<li id="item">
<a href="#foo">Stuff</a>
<ul>
<li> <a href="#foo">Foo stuff</a></li>
<li><a href="#bar">Bar Stuff</a></li>
<li><a href="#foobar">Foo-Bar Stuff</a></li>
</ul>
</li>
</ul>
假設我有一個對li元素的參考，ID 為“item”，我可以這樣得到：
let item = document.querySelector('#item');
現在我需要檢索嵌套ul串列中的最后一個錨元素。為此，我將使用“last-child”選擇器。這是我最初嘗試的：
let lastLink = item.querySelector('li:last-child > a');
我認為這可以解決問題，但遺憾的是它實際上回傳了標記中的第一個鏈接（'Stuff'）。我不太明白這一點，因為我的基本元素已經是“專案”元素，我要求它在該基本元素中找到li元素，這是其父元素的最后一個子元素，然后回傳a元素從它里面。
事實上，如果我這樣做：
let lastLink = item.querySelector('li:last-child');
它并不真正的嵌套UL串列中回傳的最后一個li元素，那么為什么不第一選擇作業，簡單地獲得“A”內的元素嗎？
這里有一些其他的事情我想它做的作業：
let lastLink = item.querySelector('#item li:last-child > a');
但是，由于我已經有了對基本元素的參考，因此在此處指定其 ID 似乎毫無意義。這些也可以作業并回傳正確的a元素：
let lastLink = item.querySelector('li ul li:last-child > a');
let lastLink = item.querySelector('li:last-child li:last-child > a');
我的問題是，為什么第一個選項不起作用？感謝有人能解釋原因
uj5u.com熱心網友回復：
做rootElm.querySelector(selector)本質上是：
for (const node of recursiveDescendantNodes) {
if (node.matches(selector)) {
return node;
}
}
該selector未分解并分析，以查看是否選擇開始的第一部分比所述根節點降低-通常，所有這些指定根節點的作用是指示來搜索通過其后代。
由于第一個<a>指向#foo匹配的選擇器通過，它被回傳。
console.log(
document.querySelector('#item > a').matches('li:last-child > a')
);<ul>
<li id="item">
<a href="#foo">Stuff</a>
<ul>
<li> <a href="#foo">Foo stuff</a></li>
<li><a href="#bar">Bar Stuff</a></li>
<li><a href="#foobar">Foo-Bar Stuff</a></li>
</ul>
</li>
</ul>不過，有一種方法可以繞過這種行為，通過使用:scope- 在支持的瀏覽器中，它表示“呼叫了元素querySelector（或querySelectorAll）”，這是您希望看到的功能。
let item = document.querySelector('#item');
let lastLink = item.querySelector(':scope li:last-child > a');
console.log(lastLink);<ul>
<li id="item">
<a href="#foo">Stuff</a>
<ul>
<li> <a href="#foo">Foo stuff</a></li>
<li><a href="#bar">Bar Stuff</a></li>
<li><a href="#foobar">Foo-Bar Stuff</a></li>
</ul>
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339325.html
標籤：javascript html css-选择器 查询选择器
下一篇：React：子組件中的陳舊道具