如何选择没有特定类的元素

Question

我想知道如何使用 JavaScript 而不是 jQuery 选择没有特定类的元素。

例如，我有这个列表：

 <ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

我通过以下方式选择已完成的任务：

 var completeTask = document.querySelector("li.completed.selected");

但是我不确定如何选择没有这些类的列表项。

原文由 Jaeeun Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这将选择第二个 LI 元素。

 document.querySelector("li:not([class])")

或者

document.querySelector("li:not(.completed):not(.selected)")

例子：

 // select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))

  <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>

原文由 Nick Grealy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

要选择 <li> 没有 completed 也没有 selected 类：

 document.querySelector("li:not(.completed):not(.selected)");

小提琴

http://jsfiddle.net/Z8djF/

原文由 BeNdErR 发布，翻译遵循 CC BY-SA 3.0 许可协议