3 回答

TA貢獻1851條經驗 獲得超5個贊
什么querySelector做的是找到一個元素在文檔中的某個地方的CSS選擇器過去了,匹配然后將檢查發現的元素是你叫元素的后代querySelector上。它不是從被調用的元素開始并向下搜索-而是始終從文檔級別開始,查找與選擇器匹配的元素,并檢查該元素是否也是調用上下文元素的后代。這有點不直觀。
所以:
someElement.querySelector(selectorStr)
就好像
[...document.querySelectorAll(selectorStr)]
.find(elm => someElement.contains(elm));
一個可能的解決方案是使用:scope來指示您希望選擇從處開始rootDiv,而不是從處開始document:
const rootDiv = document.getElementById('test');
console.log(rootDiv.querySelector(':scope > div').innerHTML);
console.log(rootDiv.querySelector(':scope > div > div').innerHTML);
console.log(rootDiv.querySelector(':scope > div > div > div').innerHTML);
<div>
<div>
<div id="test">
<div>
<div>
This is content
</div>
</div>
</div>
</div>
</div>
:scope
除Edge之外,所有現代瀏覽器均支持該功能。

TA貢獻1772條經驗 獲得超8個贊
查詢選擇器div > div > div
僅表示:
查找具有父級和祖父母級的div,它們也都是div。
而且,如果您從測試的第一個孩子開始并檢查選擇器,那么它是正確的。這就是為什么只有最后一個查詢才選擇最里面的div的原因,因為它具有第一個謂詞(用一個great-great-grandparent-div查找div),而test的第一個孩子不能滿足該謂詞。
查詢選擇器將僅測試后代,但它將評估整個文檔范圍內的表達式。試想一下,選擇器就像檢查元素的屬性一樣-即使您僅查看子元素,它仍然是其父元素的子元素。
添加回答
舉報