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

假设您获得了一个节点，并且必须提供选择器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
    }
}

---

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

jQuery通过两种方式解决了这个问题。考虑这个代码：

$'div.root'。查找'>.p2'。添加类'highlighted'； $'div.root'.children.p2'.addClass'red'； .突出显示{ 背景：黄色 } 瑞德先生{ 颜色：红色 } 第一组

第2段

第3款

第2段

---

这只是一个无效的CSS选择器：

> .shouldBeAffected {
    border: none;
}

这意味着您将无法从直接父级使用querySelector或querySelectorAll。但以下函数仅接受“.shouldbeaeffect”选择器和父元素，并返回与选择器匹配的所有直接子元素：

> .shouldBeAffected {
    border: none;
}

const directChildren=元素，选择器=> […element.children].filterchild=>child.matchesselector ; //测试运行：获取所有具有类child的div，这些div是'parent'的直接子级` const parent=document.getElementById'parent'； console.logdirectChildrenparent，“div.child”； 对 不 不 对 不 运算符>是一个二进制运算符，因此在左侧不使用任何内容的情况下使用它是无效的

子combinator>位于两个CSS选择器之间。信息技术 仅匹配第二个选择器匹配的元素 由第一个匹配的元素的直接子元素

如果您可以提供单独的父选择器和子选择器，那么您可以做如下简单的事情

let directChildren = (parent, child) => document.querySelectorAll(`${parent} > ${child}`);
directChildren('body','div');//...

---

如果父参数是节点或集合，则必须使用将其转换回选择器的方法，

正确的方法是使用：scope psuedo类

根据at MDN：

当从DOM API（如querySelector、querySelectorAll、matches或Element.closest）使用时，：scope与调用方法的元素匹配

例如：

让parent=document.querySelector'parent'； 让scoped=parent.querySelectorAll'：范围>范围'； Array.fromscoped.forEachs=>{ s、 类列表。添加'selected'； }; .选定{ 背景：黄色； } 选择我 我也是

---

未选择根节点是什么？body？如果始终是body，则可以编写文档。querySelectorAll'body>div'jQuery在不包含jQuery的情况下解决了此问题，我认为@JeffreyWesterkamp的评论是最好的选择。没有看到您的答案，非常好。我想补充一点，如果您想模拟querySelector而不是querySelectorAll，可以使用array.find。这是相关的实现：。是的，很好。我想我会把它们命名为querySelectorChild和querySelectorChildren。这个问题没有标记为jquery，我想如果只为这个问题添加jquery，那就太过分了。此外，我认为在2020年为任何问题添加它都是过分的。但这只是我的观点我的大多数项目都使用React，因此不需要任何dom选择逻辑。但在我看来，毫无疑问，如果您需要复杂的dom操作，jQuery仍然提供了最好的api，比浏览器默认提供的工具要好得多，即使有es6特性