如何为根节点的直接子节点创建选择器？

Question

假设您获得了一个节点node，并且您必须提供由选择器给出的所有直接子节点Direct。直接子代的选择器是：

childParent > directChild

但是，以下失败并在控制台中出现错误：

document.body.querySelectorAll(">div")
SyntaxError: '>div' is not a valid selector

我有一个函数需要在选择直接子节点上执行某些操作，但我不确定如何处理这个问题。当然，除了使用for循环并用我自己的代码分析子级，完全放弃选择器。

下面的代码不起作用。是否可以对其进行更改以实现预期目的？

function doWithDirectChildren(parentNode) {
    // does not work, the selector is invalid
    const children = parentNode.querySelector(">.shouldBeAffected");
    for(const direct of children) {
        // do something with the direct child
    }
}

我要求的是解决方案，而不是解决方法。

Answer 1

执行此操作的正确方法是使用:scope伪类。

根据MDN 的文档：

当从 DOM API（例如 querySelector()、querySelectorAll()、matches() 或 Element.closest()）使用时，:scope 匹配调用该方法的元素。

例如：

let parent = document.querySelector('#parent');
let scoped = parent.querySelectorAll(':scope > span');

Array.from(scoped).forEach(s => {
  s.classList.add('selected');
});

.selected {
  background: yellow;
}

<div id="parent">
  <span> Select Me </span> <br>
  <span> Me Too </span>
</div>
<span> Not Selected </span>