:scope选择器返回null问题：如何在选择器中使用当前元素？

嘿，我明白你遇到的困惑了——element.querySelector(':scope')返回null，但element.matches(':scope')却返回true，这看起来有点矛盾对吧？让我给你拆解一下原因，再给你几个实用的解决方案：

为什么会出现这种情况？ #

首先得搞清楚:scope和querySelector的行为逻辑：

• matches(':scope')返回true是因为这个方法是检查当前元素是否匹配选择器，:scope本身就代表当前元素，所以肯定匹配。
• 而querySelector(':scope')返回null，是因为querySelector的作用是在当前元素的后代节点中查找匹配的元素——当前元素本身并不是自己的后代，自然找不到啦！

正确使用:scope选择同级元素的方法 #

如果你想选择当前元素的同级元素，核心思路是切换到父元素的上下文来使用:scope，因为同级元素都是父元素的直接子元素。下面给你几个具体的例子：

例子1：选择所有同级元素 #

假设你的HTML结构是这样的：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item active">当前元素</div>
  <div class="item">Item 3</div>
</div>

现在你拿到了.active元素，要选择所有同级的.item：

const currentEl = document.querySelector('.item.active');
// 切换到父元素的上下文，用:scope指代父元素，选择它的直接子元素.item
const siblings = currentEl.parentElement.querySelectorAll(':scope > .item');

例子2：选择紧邻的下一个同级元素 #

如果只想选当前元素的下一个同级（比如上面例子里的Item 3）：

const nextSibling = currentEl.parentElement.querySelector(':scope > .active + .item');

替代方案：不用:scope也能搞定 #

如果觉得:scope的上下文切换有点绕，也可以用原生DOM方法配合matches来过滤：

const currentEl = document.querySelector('.item.active');
// 获取父元素的所有子元素，过滤掉当前元素，再筛选匹配的同级
const siblings = Array.from(currentEl.parentElement.children).filter(el => {
  return el !== currentEl && el.matches('.item');
});

小提醒：获取当前元素本身不用querySelector #

如果你的需求只是拿到当前元素，直接用你已经获取到的元素变量就行，完全没必要调用querySelector(':scope')哦！

内容的提问来源于stack exchange，提问作者Get Off My Lawn