为什么 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 及其后代）；换句话说，selectors 首先应用于整个文档，而不是 baseElement，以生成潜在元素的初始列表。然后检查生成的元素，看看它们是否是 baseElement 的后代。这些剩余元素的第一个匹配项由 querySelector() 方法返回。

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