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

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

Querying Html Hierarchy using advanced logic

html

css-selectors

selectors-api