javascript - 使用 querySelectorAll 检索直接子项

Question

我能做到:

<div id="myDiv">
   <div class="foo"></div>
</div>

myDiv = getElementById("myDiv");
myDiv.querySelectorAll("#myDiv > .foo");

也就是说，我可以成功检索 myDiv 元素的所有具有类 .foo 的直接子元素。

问题是，我必须在选择器中包含 #myDiv 这让我很困扰，因为我正在 myDiv 元素上运行查询(所以很明显多余的)。

我应该能够将 #myDiv 关闭，但是选择器不是合法语法，因为它以 > 开头。

有谁知道如何编写一个选择器，它只获取运行该选择器的元素的直接子元素？

Answer 1

好问题。在被询问时，不存在一种普遍实现的方式来执行“组合器根查询”(如 John Resig called them)。

现在 :scope引入了伪类。它不是 supported在 [pre-Chrominum] 版本的 Edge 或 IE 上，但 Safari 已经支持了几年。使用它，您的代码可以变成:

let myDiv = getElementById("myDiv");
myDiv.querySelectorAll(":scope > .foo");

请注意，在某些情况下，您还可以跳过 .querySelectorAll 并使用其他优秀的老式 DOM API 功能。例如，您可以编写 myDiv.children 而不是 myDiv.querySelectorAll(":scope > *")。

否则，如果您还不能依赖 :scope，我想不出另一种方法来处理您的情况而不添加更多自定义过滤器逻辑(例如找到 myDiv.getElementsByClassName( "foo") whose .parentNode === myDiv), 如果你试图支持一个真正只想将任意选择器字符串作为输入的代码路径，则显然不理想和一个匹配列表作为输出!但是，如果您像我一样最终问这个问题只是因为您一直在想“您只有一把锤子”，请不要忘记 DOM 还提供了各种其他工具。