假设您有一个节点 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
}
}
我要求的是解决方案,而不是解决方法。
最佳答案
执行此操作的正确方法是使用 :scope
psuedo 类。
根据documentation在MDN:
When used from a DOM API such as querySelector(), querySelectorAll(), matches(), or Element.closest(), :scope matches the element on which the method was called.
例如:
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>
关于javascript - 如何为根节点的直接子节点创建选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59669592/