So erhalten Sie Elemente mit mehreren Klassen

Sagen Sie, ich habe das:

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

Wie wähle ich dieses divElement aus?

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

Das funktioniert nicht.

Ich weiß, dass es in jQuery so ist $('.class1.class2'), aber ich möchte es mit Vanille-JavaScript auswählen.

Es ist jQuery eigentlich sehr ähnlich:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

querySelectorAll mit Standardklassenselektoren funktioniert auch hierfür.

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

UND (beide Klassen)

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

ODER (mindestens eine Klasse)

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

XOR (eine Klasse, aber nicht die andere)

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

NAND (nicht beide Klassen)

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

NOR (keine der beiden Klassen)

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

Wie @filoxo sagte, können Sie verwenden document.querySelectorAll.

Wenn Sie wissen, dass es nur ein Element in der gesuchten Klasse gibt oder Sie nur an der ersten interessiert sind, können Sie Folgendes verwenden:

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

Übrigens, während .class1.class2ein Element mit beiden Klassen angibt .class1 .class2(beachten Sie das Leerzeichen), gibt es eine Hierarchie an - und ein Element mit einer Klasse, class2die sich in einem Element mit Klasse befindet class1:

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

Wenn Sie das Abrufen eines direkten untergeordneten Elements erzwingen möchten, verwenden Sie >sign ( .class1 > .class2):

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

Für vollständige Informationen zu Selektoren:
https://www.w3schools.com/jquery/jquery_ref_selectors.asp

html

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

Javascritp-Code

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

Die querySelectorAll () -Methode gibt alle Elemente im Dokument, die mit einem oder mehreren angegebenen CSS-Selektoren übereinstimmen, als statisches NodeList-Objekt zurück.

Das NodeList-Objekt repräsentiert eine Sammlung von Knoten. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0.

Erfahren Sie auch mehr über https://www.w3schools.com/jsref/met_document_queryselectorall.asp

== Danke ==

Okay, dieser Code macht genau das, was Sie brauchen:

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

Ich hoffe es hilft! ;)

Eigentlich hat mir die Antwort von @bazzlebrush und der Kommentar von @filoxo sehr geholfen.

Ich musste die Elemente finden, bei denen die Klasse "zA yO" ODER "zA zE" sein könnte.

Mit jquery wähle ich zuerst das übergeordnete Element der gewünschten Elemente aus:

(ein div mit einer Klasse, die mit 'abc' und style beginnt! = 'display: none')

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

dann die gewünschten Kinder dieses Elements:

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

funktioniert perfekt! Beachten Sie, dass Sie document.querySelector nicht ausführen müssen. Sie können wie oben beschrieben ein vorgewähltes Objekt übergeben.