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>元素的直接子元素1}}

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

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

有没有一种干净的方法来做到这一点，而不必自己解析CSS选择器太多了？

Answer 1

你可以使用body > div > p或最外层div之外的任何谎言吗？

Answer 2

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

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

此表达式将选择外部Div元素的直接子元素的所有p个元素，因为在developer.mozilla.org

上已提及

从DOM API（例如querySelector（），querySelectorAll（）， matchs（）或Element.closest（），：scope匹配您调用的元素方法。

唯一的缺点是Internet Explorer不支持：scope。

（在以下代码段中，我不将示例与段落一起使用，因为将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>

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

2 个答案: