querySelectorAll 包含自我

Question

<div class="a">
    <span class="a">a</span>
    <span class="a">b</span>
    <span class="a">c</span>
</div>

假设我有一个名为divA代表顶级 div 节点的变量。divA.querySelectorAll('.a')将返回 3span.a秒的列表。我想知道是否有一种简单的方法可以返回包括 divA 本身在内的 4 个元素的列表？

我知道我可以从更高级别的节点开始，但让我们假设可能还有其他.a元素我不想弄乱它们。

实际上我仍然需要测试是否divA匹配我的选择器。那么css选择器有没有办法测试元素本身？

我可以创建一个父节点并从那里运行 querySelectorAll。但如果有更简单的方法，我不需要走那么远。

Answer 1

我仍然需要测试 divA 是否与我的选择器匹配。css 选择器有没有办法测试元素本身？

querySelector()无法返回它正在运行的上下文元素。

您可以做的是使用 @Andreas' 解决方案，然后使用filter()/matches()组合。

[divA, ...divA.querySelectorAll('.a')].filter(el => el.matches('.a'));