使用 querySelectorAll 检索直接子代 [英] Using querySelectorAll to retrieve direct children

问题描述

我能够做到这一点:

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

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

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

问题是，我必须在选择器中包含 #myDiv 令我感到困扰，因为我在 myDiv 元素上运行查询(所以它显然是多余).

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

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

解决方案

好问题.在被问到时，有一种普遍实现的方式来进行基于组合器的查询".(如John Resig 称他们)不存在.

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

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

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

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

I am able to do this:

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

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

That is, I can successfully retrieve all the direct children of the myDiv element that have class .foo.

The problem is, it bothers me that I must include the #myDiv in the selector, because I am running the query on the myDiv element (so it is obviously redundant).

I ought to be able to leave the #myDiv off, but then the selector is not legal syntax since it starts with a >.

Does anyone know how to write a selector which gets just the direct children of the element that the selector is running on?

解决方案

Good question. At the time it was asked, a universally-implemented way to do "combinator rooted queries" (as John Resig called them) did not exist.

Now the :scope pseudo-class has been introduced. It is not supported on [pre-Chrominum] versions of Edge or IE, but has been supported by Safari for a few years already. Using that, your code could become:

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

Note that in some cases you can also skip .querySelectorAll and use other good old-fashioned DOM API features. For example, instead of myDiv.querySelectorAll(":scope > *") you could just write myDiv.children, for example.

Otherwise if you can't yet rely on :scope, I can't think of another way to handle your situation without adding more custom filter logic (e.g. find myDiv.getElementsByClassName("foo") whose .parentNode === myDiv), and obviously not ideal if you're trying to support one code path that really just wants to take an arbitrary selector string as input and a list of matches as output! But if like me you ended up asking this question simply because you got stuck thinking "all you had was a hammer" don't forget there are a variety of other tools the DOM offers too.

这篇关于使用 querySelectorAll 检索直接子代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！