javascript - 如何获取一个类的所有元素而不是另一个类的所有元素？

Question

在我的 DOM 中有这些元素:

<div class="myclass yourclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass yourclass"></div>
<div class="myclass"></div>
<div class="myclass yourclass"></div>

我需要获取我类的所有 div 但不是你类的(因此在上述情况下我需要获取 3 个元素)。我试过这个但不起作用:

document.querySelectorAll('.myclass:not([.yourclass])')

Answer 1

querySelectorAll 中不需要[]，这是无效语法。

您可以使用 querySelectorAll 中的任何 CSS 选择器。请参阅下面的演示。(使用 CSS 着色，请参阅 console 获取 javascript 结果)

var myClassElements = document.querySelectorAll('.myclass:not(.yourclass)');
console.log(myClassElements);

div {
  color: red;
}
.myclass:not(.yourclass) {
  color: green;
}

<div class="myclass yourclass">a</div>
<div class="myclass">b</div>
<div class="myclass">c</div>
<div class="myclass yourclass">d</div>
<div class="myclass">e</div>
<div class="myclass yourclass">f</div>

:not()