使用高级逻辑查询 HTML 层次结构

Question

给定的html：

<div data-root="A">
<div>Ignored</div>
<div data-child="B">
<div data-child="C" data-root="E">
<div data-child="F"></div>
<div data-child="G">
<div data-root="Q">
<div data-child="K"></div>
</div>
</div>
</div>
</div>
</div>

对于任何给定的元素(根(，我想查询所有填充了属性data-child子元素，并且不由指定了data-root的另一个元素拥有。

示例结果：

数据

• 根 A：数据子级：B、C
数据
• 根 E：数据子级：F、G、Q
数据
• 根 Q：数据子级：K

我通过调用root.querySelectorAll("[data-child]")来解决它，然后通过跟踪每个元素来单独检查每个元素，同时检查是否有任何元素data-root指定。它可以工作，但代码对于它正在做的事情有点尴尬。理想情况下，我正在寻找一种无代码声明性解决方案，任何人都可以为我的问题提出它吗？

Answer 1

唯一可用的基于选择器的解决方案，形式为

root.querySelectorAll("[data-child]:not(:scope [data-root] *)")

使用并非所有浏览器都支持的选择器级别 4 功能，因此可能无法满足您的需求。在选择器级别 3 中没有可用的此类解决方案。

Answer 2

另一种不太受支持的方法是使用最接近相关选择器的 Element 方法。