Holen Sie sich alle Elemente, die eine Klasse mit QuerySelector enthalten
Es gibt viele Situationen, in denen Entwickler eine Gruppe von Elementen auswählen müssen, die ähnliche Eigenschaften teilen. Wenn Sie beispielsweise einige kollektive Funktionen auf die angegebenen Elemente anwenden, müssen Entwickler möglicherweise die Elemente überprüfen und abrufen, die denselben Klassennamen enthalten.
Insbesondere wird das Abrufen von Elementen nach Klassennamen unter Verwendung der JavaScript -Methoden wie "wie zgetElementsByClassName () "," querySelector () "und" querySelectorAll ()”Methoden. Der "QuerySelector ()”Methode ergibt nur die erste Übereinstimmung des angegebenen Selektors, während die "GetElements byclassName ()" und "querySelectorAll ()" " Methoden geben eine Reihe von Elementen zurück, die dem jeweiligen Klassennamen entsprechen.
Dieses Tutorial beschreibt den Weg, um alle Elemente abzurufen, die dieselbe Klasse mit QuerySelector enthalten.
So erhalten Sie alle Elemente, die eine Klasse mit QuerySelector enthalten?
Der Abfragetektor enthält nur die erste Instanz, die dem Klassennamen entspricht. Um alle Elemente zu bekommen, verwenden Sie das “QuerySelectorAll ()" Methode. Es gibt eine Gruppe aller Elemente zurück, die mit dem angegebenen Selektor übereinstimmen, z. B. einen bestimmten Klassennamen.
Beispiel 1: Erhalten Sie alle Elemente, die eine Klasse mit QuerySelector () -Methode enthalten
Schaltflächen erstellen und eine “zuweisen“BtnKlasse, um sie zu stylen:
Holen Sie sich nun alle Schaltflächenelemente mithilfe eines bestimmten Klassennamens mit Hilfe des “QuerySelector ()" Methode:
Konsole.Protokoll (Dokument.QuerySelector ('.btn '));Der Ausgang zeigt an, dass nur das erste Tasteelement mit der Methode querySelector () abgerufen wurde:
Mal sehen, was passieren wird, wenn wir versuchen, die Schaltflächen mit der Methode querySelector () zu stylen.
Speichern Sie zunächst die Referenzen aller Schaltflächen in der Variablen “Taste”:
var button = dokument.QuerySelector ('.btn ');Wenden Sie nun die Hintergrundfarbe für alle Schaltflächen mit der “anStil" Eigentum:
Taste.Stil.HintergrundColor = "Gray";Wie Sie in der Ausgabe sehen können, wird die Farbe nur auf der ersten Taste angewendet:
Beispiel 2: Erhalten Sie alle Elemente, die eine Klasse mit QuerySelectorAll () -Methode enthalten
Der "QuerySelectorAll ()Die Methode gibt die Liste der Elemente an, die dem jeweiligen Selektor entspricht:
Konsole.Protokoll (Dokument.QuerySelectorall ('.btn '));Ausgang
Holen Sie sich alle Tasten mit dem “QuerySelectorAll ()Methode, indem Sie den Klassennamen übergeben, um sie zu stylen:
var button = dokument.QuerySelectorall ('.btn ');Verwenden Sie für die Stylingliste von Elementen den für Loop -Ansatz, um jeden Knoten zu iterieren und die Hintergrundfarbe festzulegengrau”:
für (lass i = 0; i < button.length; i++)Knopf [i].Stil.HintergrundColor = "Gray";
Es ist zu sehen, dass alle Tasten erfolgreich gestaltet wurden:
Wir haben alle relevanten Informationen zum Erhalten von Elementen zusammengestellt, die dieselbe Klasse mit QuerySelector enthalten.
Abschluss
Verwenden Sie die “, um alle Elemente derselben Klasse zu erhaltenQuerySelectorAll ()”Methode statt“QuerySelector ()”. Weil es nur die erste Instanz oder das Element enthält, das den bestimmten Klassennamen enthält. In diesem Tutorial wurde der Weg zum Abrufen aller HTML -Elemente beschrieben, die denselben Klassennamen enthalten.