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的第一个孩子不能满足该谓词。
查询选择器将仅测试后代,但它将评估整个文档范围内的表达式。试想一下,选择器就像检查元素的属性一样-即使您仅查看子元素,它仍然是其父元素的子元素。
添加回答
举报