querySelector：scope为null

Question

我正在尝试选择当前元素的兄弟，但是当我在元素上使用a.querySelector(':scope')时，它为null。当我尝试将同级选择器添加到:scope时，它仍为空，但如果我在.matches(':scope')中使用它，则返回true。如何在选择器中使用当前元素？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>