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') 将返回一个包含 3 个 span.a 的列表。我想知道是否有一种简单的方法可以返回包括 divA 本身在内的 4 个元素的列表？

我知道我可以从更高级别的节点开始，但是假设可能会有其他我不想干扰的 .a 元素。

实际上我仍然需要测试 divA 是否与我的选择器匹配。那么 CSS 选择器是否有一种方法可以测试元素本身？

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

- user1663023

---

[divA, ...divA.querySelectorAll('.a')] - Andreas

我的意思是，只需将它添加到一个数组中？[divA，...divA.querySelectorAll（'.a'）] - Roberto Zvjerković

非常感谢。实际上，我仍然需要测试divA是否与我的选择器匹配。CSS选择器是否有一种方法来测试元素本身？ - user1663023

Answer 1

我仍需要测试divA是否与我的选择器匹配。CSS选择器有没有一种方式可以测试元素本身？

querySelector()无法返回其自身运行的上下文元素。

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

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

- Mitya

---

好的解决方案。然而，我个人认为divA.matches('.a') && divA || divA.querySelector('.a')是这个问题的更加优雅（并且在技术上更少耗费资源）的解决方案。请参见这个问题的答案。 - Bart Hofland

@BartHofland同意（当然 :) 但这个问题是关于.querySelectorAll()，所以比较混乱。 - Pointy

哦...是的，确实。我没有注意到。抱歉。 - Bart Hofland

一个人仍然可以做 [...divA.matches('.a') ? [divA] : [], ...divA.querySelectorAll('.a')]，这甚至更丑陋，但对于更大的元素集可能仍然更有效。 - FZs

Answer 2

我想你可能在寻找这个： :scope 编辑： 就像这个答案中所说的一样：https://dev59.com/dVcQ5IYBdhLWcg3wFP2a#43354126

const parent = document.querySelector('.parent');

console.log(parent.querySelectorAll(':scope .box'));

如果在DOM中存在，应该返回长度为5的NodeList，其中.parent是列表中的第一个元素，而子级（和孙级）填充其余四个索引...

<div class='parent box'>
   <div class='box'></div>
   <div class='box'>
     <div class='inner box'></div>
   </div>
   <div class='box'></div>
</div>

- Sunday Power Inemesit

---

这将锚定搜索到当前元素，因此仅用于指定其直接子元素。但是，它不能用于返回上下文元素本身。 - Mitya

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。 - Ivan Barayev

好的，@Ivan。我编辑了我的答案。谢谢。 - Sunday Power Inemesit