使用高级逻辑查询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与相关的选择器一起使用。