获取具有一个类但没有另一个类的元素，无需迭代。

Question

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

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

通过使用getElementsByClassName('class1')，我们可以获取所有的元素，然后可能通过检查是否存在某个类来删除元素。

有没有更好的方法来做到这一点，而不需要迭代？

我发现了这篇有趣的文章，介绍了如何获取拥有多个类的元素，那么我敢问：是否有像这样的东西：document.getElementsByClassName("class1 !class2")？

注：我不想使用jQuery。

- mavrosxristoforos

Answer 1

如果您不介意使用越来越兼容的.querySelectorAll()，只需使用以下代码即可：

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

Fiddle: http://jsfiddle.net/5tSGv/52/

虽然没有它，你仍需要以某种方式迭代className。

- MackieeE

---

谢谢MackieeE，但问题是“有没有更好的方法来做这件事？”，除了你在帖子里提到的（我在我的问题中描述了），还有别的方法吗？ - mavrosxristoforos

我明白了！很抱歉我没有仔细看问题 - 加入了一个带有querySelectorAll（）的fiddle。 - MackieeE

谢谢MackieeE。我完全不介意使用它。虽然我很想看到更多的建议，但如果没有出现，我会接受你的答案。 - mavrosxristoforos

Answer 2

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

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

- Venu

---

谢谢！那是一个有用的提示。 - mavrosxristoforos