html - 使用高级逻辑查询 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指定的元素。它可以工作，但是代码对于它正在做的事情有点尴尬。理想情况下，我正在寻找一种无代码的声明性解决方案，任何人都可以为我的问题想出它吗？

标签： htmlcss-selectorsselectors-api

Answer 1

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

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

使用尚未被所有浏览器支持的选择器级别 4 功能，因此可能无法满足您的需求。选择器级别 3 中没有这样的解决方案。