查询选择器：范围为空

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。

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

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

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