查询选择器：范围为空

Question

我试图选择当前元素的同级元素，但是当我a.querySelector(':scope')在该元素上使用时，它为空。当我尝试向它添加同级选择器时，:scope它仍然为空，但如果我在其中使用它，.matches(':scope')它会返回 true。如何使用选择器中的当前元素？

let a = document.querySelector('div > a')
console.log(a.querySelector(':scope'))
console.log(a.querySelector(':scope + span'))
console.log(a.matches(':scope'))

<div>
  <a href=""></a>
  <span></span>
</div>

Answer 1

querySelector选择上下文元素的后代。

该元素本身不会是其自身的后代，它的任何兄弟元素也不会。

:scope如果您的目标是后代，则可以使用。

例如，要仅搜索子代而不搜索更深的后代，您可以:scope与子组合器一起使用。

let a = document.querySelector('#foo')
console.log(a.querySelector(':scope > span'))

<div id="foo">
 <div><span>2</span></div>
 <span>1</span>
</div>