在没有迭代的情况下获取具有一个类而不是另一个类

Question

在下面的简单HTML中，我想获得所有带有class1的元素，但不能获得class2 。

<li class="class1 class2"></li>
<li class="class1 class3"></li>
<li class="class1 class4"></li>

使用getElementsByClassName('class1')我们可以获取所有元素，然后可能会按checking if a certain class exists删除元素。

有没有更好的方法可以做到这一点，而无需迭代？

我发现this interesting post关于获取具有多个类的元素，所以我敢问：是否有类似这样的内容：document.getElementsByClassName("class1 !class2")？

P.S。：我不想使用jQuery。

Answer 1

如果您不介意使用越来越多的compatible .querySelectorAll()，只需：{/ p>

  var getClassOne = document.querySelectorAll( '.class1:not(.class2)' );

小提琴：http://jsfiddle.net/5tSGv/52/

虽然没有它，但您必须以某种方式迭代className

Answer 2

querySelectorAll()返回一个静态（非实时）NodeList，它表示与指定选择器组匹配的文档元素的列表。

因此，如果页面没有动态生成的div，则可以使用querySelectorAll()。