使用querySelector时的怪异行为

Question

据我了解，使用时element.querySelector()，查询应从特定元素开始。

但是，当我使用下面的代码运行时，它会继续选择DIV特定元素中的第一个标签。

const rootDiv = document.getElementById('test');

console.log(rootDiv.querySelector('div').innerHTML);

console.log(rootDiv.querySelector('div > div').innerHTML);

console.log(rootDiv.querySelector('div > div > div').innerHTML);

console.log(rootDiv.querySelector('div > div > div > div').innerHTML);

console.log(rootDiv.querySelector('div > div > div > div > div').innerHTML);

<div>

  <div>

    <div id="test">

      <div>

        <div>

        This is content

        </div>

      </div>

    </div>

  </div>

</div>

如您所见，前几个结果是相同的。这是一个错误吗？还是会从文件开始处查询？

Answer 1

什么querySelector做的是找到一个元素在文档中的某个地方的CSS选择器过去了，匹配然后将检查发现的元素是你叫元素的后代querySelector上。它不是从被调用的元素开始并向下搜索-而是始终从文档级别开始，查找与选择器匹配的元素，并检查该元素是否也是调用上下文元素的后代。这有点不直观。所以：someElement.querySelector(selectorStr)就好像[...document.querySelectorAll(selectorStr)]&nbsp; .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>&nbsp; <div>&nbsp; &nbsp; <div id="test">&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; This is content&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>:scope&nbsp;除Edge之外，所有现代浏览器均支持该功能。

Answer 2

查询选择器div > div > div仅表示：查找具有父级和祖父母级的div，它们也都是div。而且，如果您从测试的第一个孩子开始并检查选择器，那么它是正确的。这就是为什么只有最后一个查询才选择最里面的div的原因，因为它具有第一个谓词（用一个great-great-grandparent-div查找div），而test的第一个孩子不能满足该谓词。查询选择器将仅测试后代，但它将评估整个文档范围内的表达式。试想一下，选择器就像检查元素的属性一样-即使您仅查看子元素，它仍然是其父元素的子元素。