So finden Sie HTML -Elemente nach CSS -Selektoren
In diesem Artikel werden die Verfahren erörtert, um die HTML-Elemente nach CSS-Selektoren zu finden. Darüber hinaus werden wir auch die Verwendung von QuerySelector () und QuerySelectorAll () -Methoden zum Ermitteln der Elemente durch CSS -Selektoren mit Hilfe von Beispielen erläutern. So lass uns anfangen!
QuerySelector () -Methode zum Finden von Elementen nach CSS -Selektoren
Die Elementschnittstelle hat eine “QuerySelector ()Methode, die zum Auffinden von Elementen nach CSS -Selektoren verwendet werden kann. Die QuerySelector () -Methode gibt eine zurückNullWert, wenn kein Übereinstimmungselement gefunden wird. Diese Methode verwendet die “Tiefe-First-VorbestellungTraversalmethode, um die Knoten des Dokuments zu durchqueren.
Syntax
Element = Dokument.QuerySelector (Selektoren);Die QuerySelector () -Methode nimmt “Selektoren”Als Argument, das eine DOM -Zeichenfolge ist, die einen oder mehrere gültige CSS -Selektoren umfasst.
So verwenden Sie die Methode querySelector (), um Elemente nach CSS -Selektoren zu finden
Jetzt werden wir das Verfahren zeigen, um unsere Elemente nach CSS -Selektoren mit der Methode querySelector () zu finden.
Beispiel 1: Verwenden der Methode querySelector (), um Elemente nach CSS -Selektoren zu finden
Im ersten Beispiel wird die Methode querySelector () die erste herausfinden
Element in mit class = “Lernprogramm"Und setzt seine Hintergrundfarbe auf"Gelb”:
!DocType html>Finden von HTML -Elementen nach CSS Selector
Die QuerySelector () -Methode
Dies ist LinuxHint.com = "Tutorial"
Die Hauptüberschrift
Erster Paragraph.
Führen Sie das oben gegebene Programm in jedem Code-Editor oder Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:
Wie Sie den Hintergrund des ersten sehen können “"Element wird in" geändert "Gelb”:
Beispiel 2: Verwenden der Methode querySelector (), um Elemente nach CSS -Selektoren zu finden
Das untergegebene Programm ändert das Textelement mit id = “Probe”:
Elemente nach CSS -Selektoren finden
Die QuerySelector () -Methode
Wir werden das Textelement ändern mit:
Dies ist ein P -Element mit dem.
Durch Ausführen des oben gegebenen Codes werden Ihnen die folgende Ausgabe angezeigt:
Beispiel 3: Verwenden der Methode querySelector (), um Elemente nach CSS -Selektoren zu finden
Im dritten Beispiel werden wir die „verwenden“QuerySelector ()Methode, um die erste zu finden
Element mit dem übergeordneten und dann seine Hintergrundfarbe auf “ändern“Gelb”:
Erstes Element
Ich bin das erste P -Element und das DIV -Element ist mein Elternteil
Zweites Element
Ich bin das zweite P -Element und das Div ist Element ist mein Elternteil.
Klicken Sie auf die unten angegebene Schaltfläche, um die Hintergrundfarbe des ersten P -Elements zu ändern
Klick auf das "Farbe ändernSchaltfläche, um die Hintergrundfarbe des ersten zu ändern
Element:
QuerySelectorAll () finden Elemente nach CSS -Selektoren
In HTML gibt die QuerySelectorAll () -Methode ein statisches Nodelist -Objekt zurück, das eine Sammlung der untergeordneten Elemente eines Elements umfasst, das mit den angegebenen CSS -Selektoren übereinstimmt. Indexnummern werden verwendet, um die Knoten ab 0 zu finden.
Syntax
Element.QuerySelectorall (Selektoren)Die QuerySelectorAll () -Methode nimmt an “Selektoren”Als Argument ist eine DOM -Zeichenfolge, die einen oder mehrere gültige CSS -Selektoren umfasst.
Beispiel 1: Verwenden von querySelectorAll () -Methoden zum Suchen von Elementen nach CSS -Selektoren
Im ersten Beispiel werden wir die Methode querySelectorAll () verwenden, um alle zu finden
Elemente im Dokument. Danach wird es die "festlegen"Hintergrundfarbe”Von der ersten
Element zu “Rosa”:
Hauptüberschrift mit
Erster Absatz mit.
Zweiter Absatz mit.
Ändern Sie die Hintergrundfarbe des ersten P -Elements mit
Hinweis: Wir lernen, wie man Elemente nach CSS -Selektoren findet
Wie Sie sehen können, der Hintergrund des ersten
Element wird in “geändert“Rosa”:
Beispiel 2: Verwenden von querySelectorAll () -Methoden zum Suchen von Elementen nach CSS -Selektoren
Jetzt werden wir ein JavaScript -Programm schreiben, um die Gesamtzahl der Elemente mit dem zu findenLernprogramm"Klasse, indem Sie die" verwenden "LängeEigenschaft des Nodelist -Objekts:
Das erste Divelelement mit
Zweites Divelelement mit
Ein P -Element mit
Klicken Sie auf die folgende Schaltfläche, um herauszufinden, wie die Anzahl der Elemente mit der Klasse "Tutorial"
Jetzt zeigt Ihnen die Ausgabe eine “Klick mich" Taste; Klicken Sie darauf, um die Anzahl der Elemente mit Class = zu überprüfen. “Lernprogramm”:
Beispiel 3: Verwenden von querySelectorAll () -Methoden zum Suchen von Elementen nach CSS -Selektoren
Im folgenden Beispiel werden wir die QuerySelectorAll () -Methode finden, um zu finden “H2","div", Und "SpanneElemente. Nachdem wir die angegebenen Elemente gefunden haben, werden wir ihre Hintergrundfarbe in „Rot“ ändern:
Das Hauptelement
Das zweite H2 -Element
Ein Divelelement
Ein P -Element.
Ein P -Element mit = "Farbe: blau;"> Span Element
Klicken Sie auf die folgende Schaltfläche, um die Hintergrundfarbe aller Elemente H2, Div und Span SPAN festzulegen.