1

考虑给您一个节点node，您必须提供 selector 给出的所有直接子节点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
    }
}

我在寻求解决方案，而不是解决方法。

4

3 回答 3

5

正确的方法是使用:scopepsuedo 类。

根据MDN的文档：

当从诸如 querySelector()、querySelectorAll()、matches() 或 Element.closest() 等 DOM API 使用时，: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>

于 2021-05-18T10:01:16.593 回答
0

子组合运算符>是二元运算符，因此在左侧没有任何内容的情况下使用它是无效的。

子组合符 (>) 放置在两个 CSS 选择器之间。它只匹配第二个选择器匹配的那些元素，这些元素是第一个选择器匹配的元素的直接子元素。

如果您可以提供个人parent和child选择器，则可以执行类似这样的简单操作

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

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

于 2020-01-09T18:54:15.327 回答
-1

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

$('div.root').find('> .p2').addClass('highlighted');
$('div.root').children('.p2').addClass('red');
.highlighted {
  background: yellow
}

.red {
  color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="root">
  <p>div 1</p>
  <p class="p2">paragraph 2</p>
  <p>paragraph 3</p>
  
  <div>
    <p class="p2">paragraph 2 2</p>
  </div>
</div>

using.find('> selector)仅查找与选择器匹配的直接子级， using.children('selector')也执行相同操作。

于 2020-01-09T18:01:04.683 回答