QuerySelectorAll-如何避免获得带有给定参数的嵌套元素？

Question

我正在获取一个网页，我需要得到所有元素的列表与给定的类名。问题是，我的数组还包含嵌套元素（从父元素获取），这些元素也具有相同的类名。

示例:

<div class="someClass"></div>
<div class="someClass"></div>
   <div class="someClass"></div>
<div class="someClass"></div>
<div class="someClass"></div>

在这种情况下，我将接收5个元素，而不是4个-我想避免得到嵌套的元素。有什么解决方案可以达到我的目的吗？

Answer 1

1. 将结果转换为数组以访问 方法/li>

null

const allSomeClass = document.querySelectorAll(".someClass");
const filtered = Array.from(allSomeClass).filter(
  element => !element.matches(".someClass .someClass")
);
console.log(filtered)

<div id=1 class="someClass"></div>
<div id=2 class="someClass">
  <div id=3 class="someClass"></div>
</div>
<div id=4 class="someClass"></div>
<div id=5 class="someClass"></div>