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

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>

我需要得到myclass的所有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()