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

Question

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

例如,我有这个列表:

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

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

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

但后来我不确定如何选择没有这些类的列表项.

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>

Answer 2

要选择<li>那个没有completed也没有selected类:

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

小提琴

http://jsfiddle.net/Z8djF/

Answer 3

选择:not(*selector*)器还接受逗号（也是如此querySelectorAll()）https://developer.mozilla.org/en-US/docs/Web/CSS/:not#syntax：

let plainElements = document.querySelectorAll( ':not( .completed, .in-progress ) ');
plainElements.forEach( ( item ) => { item.style.color = 'red'; } );

li { color: green; }

<ul id="tasks">
  <li class="completed selected">Task 1</li>
  <li>Task 2</li>
  <li class="in-progress">Task 3</li>
</ul>

Answer 4

您可以尝试:not()选择器

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

http://jsfiddle.net/UM3j5/