3

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

<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>external 的直接子元素的元素<div>

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

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

有没有一种干净的方法可以做到这一点,而不必自己解析 CSS 选择器,太多了?

4

2 回答 2

2

您可以使用body > div > p或位于最外层 div 之外的任何东西吗?

于 2011-04-08T01:40:39.190 回答
0

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

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

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

当从诸如 querySelector()、querySelectorAll()、matches() 或 Element.closest() 之类的 DOM API 中使用时,:scope 匹配您调用该方法的元素。

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


在下面的代码片段中,我不使用带有段落的示例,因为将divorp元素放在元素内是错误的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>

于 2020-05-27T18:01:03.273 回答