So erhalten Sie Elemente mit mehreren Klassen

130

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.

javascript class element

— Nathan Prometheus
quelle

180

Es ist jQuery eigentlich sehr ähnlich:

document.getElementsByClassName('class1 class2')

MDN Doc getElementsByClassName

— Joe
quelle

Was ist mit dem Erhalten eines Elements mit nur einer Klasse, der angegebenen @Joe

— CodeGuru

1

Soweit ich mich erinnere, kommt der Unterricht ohne "." document.getElementsByClassName ('class1 class2')

— Misha Beskin

2

In der angegebenen MDN-Verknüpfung wird Punkt nicht vor Klassennamen im Parameter getElements verwendet. Ich habe dies sowohl auf Firefox als auch auf Chrom überprüft und es funktionierte ohne Punkte, aber nicht mit Punkten.

— Gaurav Singh

36

querySelectorAll mit Standardklassenselektoren funktioniert auch hierfür.

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

— Filoxo
quelle

2

Das funktioniert nicht, es muss sein document.querySelectorAll('.class1, .class2');

— Bazzlebrush

8

@bazzlebrush Ihr Selektor würde Elemente mit .class1ODER erfassen .class2, während der obige nur Elemente mit beiden Klassen erfassen würde und tatsächlich funktioniert. Siehe die Konsolenausgabe dieses Tests: jsfiddle.net/0ph1p9p2

— filoxo

Ok, mein Schlechtes, ich habe falsch verstanden, was das OP tun wollte. Aber IMO ist ein typischerer Anwendungsfall, Elemente auswählen zu wollen, die entweder eine Klasse oder beide haben. In diesem Fall ist mein Beispiel das, was Sie wollen.

— Bazzlebrush

36

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

— Bitter blau
quelle

Das ist fantastisch. Sollte oben sein.

— Hackstaar

12

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

— Guyaloni
quelle

1

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

— Md. Abu Sayed
quelle

1

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

— Gabriel Marques
quelle

0

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.

— user2677034
quelle