In JavaScript ist das „ querySelectorAll() Die Methode ruft das allererste Element ab, das genau mit den angegebenen CSS-Selektoren übereinstimmt. Diese Methode beginnt mit dem Durchlaufen des DOM-Baums, um diese Aufgabe auszuführen. Sobald das Element gefunden wurde, wendet es die im Skriptabschnitt definierten integrierten JavaScript-Eigenschaften oder -Methoden an, um spezielle Aufgaben auszuführen. Diese Methode wird normalerweise verwendet, um die Zielelemente entsprechend den Anforderungen auszuwählen. Es ermöglicht den Benutzern, alle Elemente auszuwählen, die dem angegebenen Selektor oder dem bestimmten Selektor am angegebenen Index entsprechen.
Diese Anleitung veranschaulicht die Verwendung der Methode „querySelectorAll()“ in JavaScript.
Wie verwende ich die Methode „querySelectorAll()“ in JavaScript?
Um das „ querySelectorAll() Geben Sie bei der Methode „CSS“ den CSS-Selektor als Argument an. Zu den CSS-Selektoren gehören „Typ, Klasse und ID“. Wenn der CSS-Selektor ungültig ist, gibt er einen Syntaxfehler zurück, andernfalls gibt er ein statisches NodeList-Objekt als Standardausgabe zurück.
Syntax
document.querySelectorAll ( CSS-Selektoren )
In der obigen Syntax ist das „ CSS-Selektoren ” beziehen sich auf alle gültigen CSS-Selektoren.
Lassen Sie uns die oben definierte Syntax praktisch anwenden.
HTML Quelltext
Übersicht über den angegebenen HTML-Code:
< h2 Klasse = 'Demo' > Erste Überschrift h2 >< h3 Klasse = 'Demo' > Zweite Überschrift h3 >
< P Klasse = 'Demo' > Erster Paragraph P >
< P Klasse = 'Demo' > Zweiter Absatz P >
< Taste onclick = „jsFunc()“ > Klicken Sie hier ! Taste >
In den obigen Codezeilen:
- Der ' „Tag fügt eine Unterüberschrift mit der Klasse „Demo“ hinzu.
- Der ' „Tag definiert eine zweite Unterüberschrift mit derselben Klasse namens „demo“.
- Der ' „Tags betten die Absatzanweisungen mit derselben Klasse ein, z. B. „demo“.
- Der '
Das Tag enthält eine neue Schaltfläche mit einem „onclick“-Mausereignis zum Ausführen der Funktion „jsFunc()“.
Notiz: In diesem Handbuch wird der jeweilige HTML-Code befolgt.
Beispiel 1: Anwenden der Methode „querySelectorAll()“, um Elemente derselben Klasse auszuwählen und ihre Farben zu ändern
In diesem Beispiel wird die Methode „querySelectorAll()“ verwendet, um alle Elemente auszuwählen, die die Klasse „demo“ verwenden.
JavaScript-Code
Sehen wir uns den unten aufgeführten Code an:
< Skript >Funktion jsFunc ( ) {
const list = document.querySelectorAll ( '.Demo' ) ;
für ( lassen ich = 0 ; ich < list.length; i++ ) {
Liste [ ich ] .style.color = 'Orange Rot' ;
}
}
Skript >
In den obigen Codezeilen:
- Der ' jsFunc() „Funktion ist definiert.
- In ihrer Definition verwendet die Variable „Liste“ die Variable „ querySelectorAll() ”-Methode, um alle Elemente auszuwählen, die die Klasse „demo“ haben.
- Als nächstes wird das „ für Die Schleife initialisiert eine Knotenliste, um alle gefundenen HTML-Elemente mit der Klasse zu durchlaufen. Demo “ und ändern Sie ihre Textfarbe mit dem „ Stil.Farbe ' Eigentum.
Ausgang
In der obigen Ausgabe ist zu sehen, dass sich die Textfarbe der Elemente mit demselben Klassennamen, d. h. „Demo“, beim Klicken auf die Schaltfläche ändert.
Beispiel 2: Anwenden der Methode „querySelectorAll()“ zur Auswahl der spezifischen indizierten Elemente
Neben allen Elementen kann der Benutzer auch das spezifische indizierte Element mit der Klasse „Demo“ auswählen.
JavaScript-Code
Betrachten Sie den angegebenen JavaScript-Code:
< Skript >Funktion jsFunc ( ) {
const list = document.querySelectorAll ( „h2.demo“ ) ;
Liste [ 0 ] .style.color = 'Grün' ;
}
Skript >
Im obigen Codeausschnitt:
- Die Variable „list“ wählt das „h2“-Element aus, dessen Klasse „demo“ ist, mit Hilfe der „ querySelectorAll() ' Methode.
- Danach gibt die Variable „list“ den Index des Elements „h2“ an, um die Textfarbe des am Index „0“ platzierten Elements „H2“ zu ändern.
Ausgang
Die Ausgabe zeigt, dass die Textfarbe des Elements „H2“, das am Nullindex platziert ist, die Klasse „demo“ beim Klicken auf die Schaltfläche geändert hat.
Beispiel 3: Anwenden der Methode „querySelectorAll()“, um die Anzahl der Elemente mit derselben Klasse zu ermitteln
In diesem Beispiel wird mithilfe der Methode „querySelectorAll()“ die Anzahl der Elemente derselben Klasse abgerufen.
HTML Quelltext
Schauen Sie sich zunächst den modifizierten HTML-Code von „Beispiel 1“ an:
< P Ausweis = 'für' > P >
Fügen Sie im oben genannten HTML-Code einen leeren Absatz mit der ID „para“ am Ende des HTML-Codes „Beispiel 1“ hinzu.
JavaScript-Code
Fahren Sie nun mit dem JavaScript-Code fort:
< Skript >Funktion jsFunc ( ) {
const nodelist = document.querySelectorAll ( „h3“ ) ;
document.getElementById ( 'für' ) .innerHTML = nodelist.length;
}
Skript >
Gemäß dem obigen Codeausschnitt:
- Die Funktion „jsFunc()“ wählt zunächst alle „
“-Elemente mithilfe der „ querySelectorAll() ' Methode.
- Danach wird das „ getElementById() Die Methode greift über ihre ID „para“ auf den hinzugefügten leeren Absatz zu, um ihn mit dem zurückgegebenen Wert der angewendeten Eigenschaft „length“ anzuhängen.
Ausgang
Wie Sie sehen, zeigt die obige Ausgabe insgesamt „4“ Elemente, die mit dem angegebenen CSS-Klassenselektor „demo“ übereinstimmen.
Abschluss
Der ' querySelectorAll() Die Methode „“ kann einfach verwendet werden, indem der CSS-Selektor als Wert angegeben wird. Diese Methode gleicht jedes HTML-Element ab und wählt diejenigen aus, die dem angegebenen Selektor entsprechen. Sobald die Elemente ausgewählt sind, führt es die im Skriptabschnitt definierte erforderliche Aufgabe für sie aus. In dieser Anleitung wurde kurz die Verwendung der Methode „querySelectorAll()“ in JavaScript erläutert.