Comment obtenir des éléments avec plusieurs classes

Dis que j'ai ceci:

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

Comment sélectionner cet divélément?

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

Cela ne fonctionne pas.

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

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

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

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)");

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

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

Comme @filoxo l'a dit, vous pouvez utiliser document.querySelectorAll.

Si vous savez qu'il n'y a qu'un seul élément avec la classe que vous recherchez, ou que vous n'êtes intéressé que par le premier, vous pouvez utiliser:

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

BTW, tandis .class1.class2qu'indique un élément avec les deux classes, .class1 .class2(notez l'espace blanc) indique une hiérarchie - et un élément avec une classe class2qui est à l'intérieur d'un élément avec une classe class1:

<div class='class1'>
  <div>
    <div class='class2'>
      :
      :

Et si vous voulez forcer la récupération d'un enfant direct, utilisez >sign ( .class1 > .class2):

<div class='class1'>
  <div class='class2'>
    :
    :

Pour des informations complètes sur les sélecteurs:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

<h2 class="example example2">A heading with class="example"</h2>

code javascritp

var element = document.querySelectorAll(".example.example2");
element.style.backgroundColor = "green";

La méthode querySelectorAll () renvoie tous les éléments du document qui correspondent à un ou plusieurs sélecteurs CSS spécifiés, sous la forme d'un objet NodeList statique.

L'objet NodeList représente une collection de nœuds. Les nœuds sont accessibles par des numéros d'index. L'index commence à 0.

en savoir plus sur https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Merci ==

Ok, ce code fait exactement ce dont vous avez besoin:

HTML:

<div class="class1">nothing happens hear.</div>

<div class="class1 class2">This element will receive yout code.</div>

<div class="class1">nothing happens hear.</div>

JS:

function getElementMultipleClasses() {
    var x = document.getElementsByClassName("class1 class2");
    x[0].innerHTML = "This is the element you want";
}
getElementMultipleClasses();

J'espère que ça aide! ;)

en fait, la réponse de @bazzlebrush et le commentaire de @filoxo m'ont beaucoup aidé.

J'avais besoin de trouver les éléments où la classe pourrait être "zA yO" OU "zA zE"

En utilisant jquery, je sélectionne d'abord le parent des éléments souhaités:

(un div avec une classe commençant par 'abc' et style! = 'display: none')

var tom = $('div[class^="abc"][style!="display: none;"]')[0];                   

puis les enfants souhaités de cet élément:

var ax = tom.querySelectorAll('.zA.yO, .zA.zE');

fonctionne parfaitement! notez que vous n'avez pas à faire document.querySelector, vous pouvez comme ci-dessus passer dans un objet présélectionné.