Comment obtenir des éléments avec plusieurs classes

Question

Dis que j'ai ça :

 <div class="class1 class2"></div>

Comment sélectionner cet élément div

 document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0]

Cela ne fonctionne pas.

Je sais que, dans jQuery, c'est $('.class1.class2') , mais j'aimerais le sélectionner avec vanille JavaScript.

Answer 1

ET (les deux classes)

 var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

OU (au moins une classe)

 var list = document.querySelectorAll(".class1,.class2");

XOR (une classe mais pas l'autre)

 var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

NAND (pas les deux classes)

 var list = document.querySelectorAll(":not(.class1),:not(.class2)");

NOR (aucune des deux classes)

 var list = document.querySelectorAll(":not(.class1):not(.class2)");

Answer 2

C'est en fait très similaire à jQuery :

 document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

Answer 3

querySelectorAll avec des sélecteurs de classe standard fonctionne également pour cela.

 document.querySelectorAll('.class1.class2');