使用高级逻辑查询 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] *)")

使用 not yet supported by all browsers 的选择器级别 4 功能，因此可能无法满足您的需求。选择器级别 3 中没有这样的解决方案。

Answer 2

另一种不太受支持的方法是将 Element 方法 closest 与相关选择器一起使用。