Como selecionar um elemento que não tem classe específica

94

Estou me perguntando como selecionar um elemento que não tem uma classe específica usando JavaScript, não jQuery.

Por exemplo, tenho esta lista:

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

e eu seleciono a tarefa concluída por:

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

Mas não tenho certeza de como selecionar o item da lista que não contém essas classes.

Jaeeun Lee
fonte

Respostas:

171

Isso seleciona o segundo LIelemento.

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

ou

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

Exemplo:

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

Para selecionar o <li>que não tem completednem selectedclasse:

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

Violino

http://jsfiddle.net/Z8djF/

BeNdErR
fonte
Como fazer o inverso : ou seja, selecionar todos os elementos que possuem ambos completede selectedclasse?
user2284570
@ user2284570 basta escrever ambas as classes sem espaços em branco: li.completed.selected-> isso vai corresponder a todos os lielementos que têm a classe completedANDselected
BeNdErR
9

Você pode tentar o :not()seletor

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

http://jsfiddle.net/UM3j5/

musa
fonte
2
document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
    // do whatever you want. with 'e' as element :P
});
Burhan Ibrahimi
fonte
1

Em vez disso, tente obter uma matriz dos filhos dos pais:

var completeTask = document.querySelector("#tasks").childNodes;

Em seguida, faça um loop / procure-os conforme necessário.

trituração
fonte