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

Question

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

<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。)

和对最外层的引用 <div>元素，我想以某种方式使用 outerDiv.querySelectorAll('p')仅选择 <p>外部元素的直接子元素 <div> .

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

前置 "div > " 也是不够的到选择器并从 outerDiv.parentNode 应用它自内<p>也匹配 "div > p" .

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

Answer 1

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

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

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

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

---

(在下面的代码片段中，我没有使用带有段落的示例，因为将 div 或 p 元素放在 p 元素。检查这些链接: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>