例如,如果我有一个文档片段:
<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 选择器,太多了?