有没有办法让 querySelectorAll 只搜索元素的子元素，而不是所有后代？

发布于 2024-10-31 03:10:25 字数 1001 浏览 1 评论 0原文

例如，如果我有一个文档片段：（

<div> <!-- I have a reference to this: "outerDiv". -->
  <p> <!-- This is the <p> I want to select. -->
    <div>
      <p> <!-- I don't want to select this <p>. --> </p>
    </div>
  </p>
</div>

这是一个假设的文档。HTML 解析器实际上不会构建如下所示的 DOM。）

以及对最外层

的引用元素，我想以某种方式使用 outerDiv.querySelectorAll('p') 来仅选择作为外部元素直接子元素的
元素

我无法使用 outerDiv.childNodes 并搜索

元素，因为我实际上有一个比"p"长得多的选择器（例如，它可能看起来像"p > a > b"）。我也无法控制 HTML，也无法使用 jQuery 或其他 JavaScript 库。

将 "div > " 添加到选择器并从 outerDiv.parentNode 应用它也是不够的，因为内部

也匹配“div > p”。

有没有一种干净的方法可以做到这一点，而不必自己过多地解析 CSS 选择器？

原文

For example, if I have a snippet of a document:

<div> <!-- I have a reference to this: "outerDiv". -->
  <p> <!-- This is the <p> I want to select. -->
    <div>
      <p> <!-- I don't want to select this <p>. --> </p>
    </div>
  </p>
</div>

(This is a hypothetical document. HTML parsers would not actually construct a DOM that looks like this.)

and a reference to the outermost <div> element, I'd like to somehow use outerDiv.querySelectorAll('p') to select only the <p> elements that are direct children of the outer <div>.

I can't use outerDiv.childNodes and search for the <p> elements because I actually have a selector that is much longer than "p" (e.g., it might look like "p > a > b"). I also don't have control over the HTML and can't use jQuery or other JavaScript libraries.

It's also not sufficient to prepend "div > " to the selector and apply it from outerDiv.parentNode since the inner <p> also matches "div > p".

Is there a clean way to do this without having to parse the CSS selector myself, too much?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

复古式 2024-11-07 03:10:25

假设您有对外部 div 的引用，则可以使用以下表达式：

outerDiv.querySelectorAll(":scope > p");

此表达式将选择作为outerDiv 元素的直接子元素的所有 p 元素，因为如developer.mozilla.org

当从 DOM API（例如 querySelector()、querySelectorAll()）使用时，
matches(), 或 Element.closest(), :scope 匹配你调用的元素
的方法。

（在下面的代码片段中，我没有使用带有段落的示例，因为将 div 或 p 元素放入 p 中是错误的检查以下链接：Stack Overflow & Mozilla 开发者）

//reference to outer div
let outerDiv = document.getElementById("outerDiv");

let selected = outerDiv.querySelectorAll(":scope > div");

console.log(selected);//it returns only the direct child div

<div id="outerDiv"> <!-- I have a reference to this: "outerDiv". -->
  <div class="I want this"> <!-- This is the <div> I want to select. -->
     <div class="I dont want this"> <!-- I don't want to select this <div>. --></div>
  </div>
</div>

Supposing that you have a reference to the outer div you can use the below expression:

outerDiv.querySelectorAll(":scope > p");

This expression will select all p elements that are direct children of outerDiv element because as referred on developer.mozilla.org

When used from a DOM API such as querySelector(), querySelectorAll(),
matches(), or Element.closest(), :scope matches the element you called
the method on.

(in the following code snippet I dont use the example with paragraph because is wrong to put a div or p element inside a p element. Check these links about this: Stack Overflow & Mozilla Developer)

//reference to outer div
let outerDiv = document.getElementById("outerDiv");

let selected = outerDiv.querySelectorAll(":scope > div");

console.log(selected);//it returns only the direct child div

<div id="outerDiv"> <!-- I have a reference to this: "outerDiv". -->
  <div class="I want this"> <!-- This is the <div> I want to select. -->
     <div class="I dont want this"> <!-- I don't want to select this <div>. --></div>
  </div>
</div>

回复收藏 0 原文

风追烟花雨 2024-11-07 03:10:25

你可以使用body>吗？分区> p 或最外层 div 之外的任何内容？

回复收藏 0 原文

遗忘曾经 2024-11-07 03:10:25

我建议您采用 Nick Pantelidis 的答案，但为了后代，这里有另一个可能的解决方案。

这使用 Element.matches 来测试选择器是否匹配每个特定的子元素（请记住，与 childNodes< /code>，子项仅包含 Node.ELEMENT_NODE 节点）：

function querySelectChildren(element, selector) {
  return Array.prototype.find.call(element.children, (child) => child.matches(selector));
}

let p = querySelectChildren(divRef, 'p');
console.log(p);

I recommend you go with Nick Pantelidis's answer, but just for posterity, here is another possible solution.

This uses Element.matches to test if the selector matches each specific child element (remember, unlike childNodes, children only contains Node.ELEMENT_NODE nodes):

function querySelectChildren(element, selector) {
  return Array.prototype.find.call(element.children, (child) => child.matches(selector));
}

let p = querySelectChildren(divRef, 'p');
console.log(p);

回复收藏 0 原文

~没有更多了~