javascript - Cómo seleccionar un elemento que no tiene una clase específica

Me pregunto cómo seleccionar un elemento que no tenga una clase específica usando JavaScript, no jQuery.

Por ejemplo, tengo esta lista:

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

y selecciono la tarea completada por:

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

Pero entonces no estoy seguro de cómo seleccionar el elemento de la lista que no tiene esas clases.

Respuesta #1

Esto selecciona el segundo elemento LI.

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

o

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

Ejemplo:

// 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>

Respuesta #2

Para seleccionar el <li> que no tiene la clase completed ni selected:

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

Violín

http://jsfiddle.net/Z8djF/

Respuesta #3

Puedes probar el selector :not()

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

http://jsfiddle.net/UM3j5/

Respuesta #4

El selector :not(*selector*) también acepta comas (al igual que 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>