JavaScript -Abfrage -Selector -Methode - erklärt
Was ist eine QuerySelector () -Methode in JavaScript
Möchten Sie nach einem Element im Dokument suchen und zugreifen? Der QuerySelector () ist die perfekte Methode, die Sie für die vorgeschlagene Funktionalität erhalten haben.
Der QuerySelector () ist eine Methode in JavaScript, die eine wichtige Rolle bei der Suche nach Elementen spielt. Es handelt sich um eine Methode aus der DOM -API, mit der wir ein einzelnes Element abrufen oder abrufen können, das dem zu übergebenen Parameter entspricht.
Der QuerySelector () Gibt NULL zurück, wenn keine Übereinstimmungen gefunden werden; Wenn das Dokument jedoch zwei Übereinstimmungen gibt, greift es nur auf das erste Ereignis zu.
Jetzt werden wir die Syntax des QuerySelector () Methode, bevor Sie zu den Beispielen wechseln, um das besser zu verstehen QuerySelector () Methode.
Syntax
Element = Dokument.QuerySelector (Selector (en));Der QuerySelector () Die Methode nimmt nur einen Parameter ein, der einen oder mehrere Selektoren angibt. Diese Selektoren werden verwendet, um das erste HTML -Element basierend auf ihrem Typ, Attribut oder dem Wert seines Attributs usw. auszuwählen.
Hier werden wir verschiedene CSS -Selektoren verwenden, um ordnungsgemäß zu zeigen, wie die QuerySelector () Methode funktioniert tatsächlich:
Der universelle Selektor
Das Sternchenzeichen (*) ist als universeller Selektor bekannt; Es wird verwendet, um auf alle Elemente des Dokuments zuzugreifen:
Hallo!
Willkommen bei Linux Hint!
Der Typ/Tag -Selektor
Wir können nach jedem Element suchen, indem wir den Wert seines Tags an die übergeben QuerySelector () Methode.
Zum Beispiel, wenn wir das bekommen wollen “ ”
Html
Hallo!
Willkommen bei Linux Hint!
JavaScript
Der ID -Selektor
Der # Das Zeichen wird verwendet, um ein Element basierend auf seiner ID auszuwählen. IDs sollen eindeutig sein und keine zwei Elemente auf einer einzelnen HTML -Seite sollten dieselbe ID haben:
Um beispielsweise die Farbe eines HTML-Elements zu ändern, dessen ID „Beispiel-ID“ ist, sieht der Code so aus:
Html
Hallo!
Willkommen bei Linux Hint!
JavaScript
Der Klassenwähler
Der Punkt “.” Zeichen ist der Selektor für das Klassenattribut, mit dem ein Element basierend auf seiner Klasse ausgewählt wird. Mehrere Elemente können die gleiche Klasse haben, aber die QuerySelector () Die Methode gibt nur das erste Element zurück:
Um beispielsweise die Hintergrundfarbe eines HTML-Elements zu ändern, dessen Klasse „Beispielklasse“ ist, sieht der Code so aus:
Html
Hallo!
Willkommen bei Linux Hint!
JavaScript
Mehrere Selektoren
Wir können eine Kombination aus mehreren Selektoren geben QuerySelector () Diese Methode sollten auch diese Selektoren durch Kommas getrennt werden. Es greift jedoch nur auf ein einzelnes Element zu, das in der HTML -Codesequenz zuerst vorkommt:
Wenn wir beispielsweise zwei HTML -Tags in der Methode querySelector () erwähnen:
Während unsere HTML -Tags in der folgenden Sequenz platziert werden
Hallo!
Willkommen bei Linux Hint!
JavaScript QuerySelector () Methode - erklärt
Der QuerySelector () Die Methode gibt nur das erste Spiel zurück, das ist
Schild:
Um auf mehrere Elemente in JavaScript zuzugreifen, wird die Methode querySelectorAll () verwendet:
QuerySelectorAll () -Methode in JavaScript
Angenommen, wir wollen die Farbe aller ändern
Tags, deren Klasse „grün“ ist. Das HTML und JavaScript werden so ausgehen:
Html
Willkommen bei Linux Hint!
Willkommen bei Linux Hint!
Willkommen bei Linux Hint!
Willkommen bei Linux Hint!
Willkommen bei Linux Hint!
JavaScript
Abschluss
Der QuerySelector () Die Methode ist eine effiziente Möglichkeit, auf HTML -Elemente in DOM zuzugreifen. JavaScript bietet auch andere Methoden zum Zugriff auf DOM -Elemente QuerySelector () ist am vielseitigsten und bietet die meisten Möglichkeiten, wenn es um DOM -Manipulation geht. Aus der Einführung in die Beispiele hat dieser Beitrag fast alle Aspekte genau und gründlich erklärt und geklärt. Mit Hilfe von Beispielen hat es das Konzept der QuerySelector () Methode.