为什么 js dom api 'querySelector' 选择自身

Question

我很困惑为什么$1，firstBB调用querySelector('.aa .bb')应该在元素下执行#root。

const $1 = document.querySelector('#root').querySelector('.aa .bb');
const $2 = document.querySelector('#root').querySelector('.aa').querySelector('.bb');

document.querySelector('#result').innerHTML = `$1 is ${$1.id}; $2 is ${$2.id}`

<div class="aa" id="root">
  <div class="bb" id="firstBB">xxx</div>
  <div class="aa">
    <div class="bb" id="secondBB">xxx</div>
  </div>
</div>
<div>Result: <span id="result"></span></div>

Chrome版本：116.0.5845.188

这是 的正确行为吗querySelector？

Answer 1

这不是错误。这是指定的行为。

元素：querySelector() 方法

返回值

与指定的选择器组匹配的 baseElement 的第一个后代元素。匹配时会考虑元素的整个层次结构，包括元素集之外的元素（包括 baseElement 及其后代）；换句话说，选择器首先应用于整个文档，而不是基本元素，以生成潜在元素的初始列表。然后检查生成的元素以查看它们是否是 baseElement 的后代。这些剩余元素的第一个匹配项由 querySelector() 方法返回。

（说实话，在现在阅读文档之前，我也有这样的印象：它会选择第二个）