Question

是否可以使用querySelector选择一个元素，只要它没有具有特定类的祖先。

例如选择在其祖先树的任何级别都没有“ b”类的所有元素：

<div class="a">
  <span class="element">First</span>
</div>
<div class="b">
  <span class="element">Second</span>
  <div class="c">
    <span class="element">Third</span>
  </div>
</div>

我想从选择中排除第二和第三元素，因为它们都在“ b”类div中。

document.querySelector(':not(.b) > element');
// returns the First and Third (because Third is not a direct child)

document.querySelector(':not(.b) element');
// returns the First and Third (because "c" fulfills the :not selection criteria of not being "b")

这显然是一个简化的示例。元素可以嵌套在各种不同的级别。但是，只要祖先树中某处有“ b”类，就应该将其从选择中排除。

使用querySelector甚至有可能吗？

编辑：我正在寻找一种自行使用querySelector的解决方案，因为我使用的是仅允许我传递querySelector字符串的库，而我无权访问库的内部代码来执行其他过滤结果。看来这是不可能的。

Answer 1

我认为您应该选择所有范围并根据其父母对其进行过滤。

let elements = document.querySelectorAll('.element');
let selections = [...elements].filter(element => !element.closest(".b"));

在祖先树中没有类的querySelector元素

1 个答案: