DOM-Elemente mit Selektoren finden
Die Selectors API stellt Methoden bereit, die es schnell und einfach machen, Element
-Knoten aus dem DOM zu holen, indem sie mit einer Reihe von Selektoren abgeglichen werden. Dies ist viel schneller als frühere Techniken, bei denen es zum Beispiel notwendig war, eine Schleife im JavaScript-Code zu verwenden, um die spezifischen Elemente zu finden, die Sie suchen.
Das NodeSelector-Interface
Diese Spezifikation fügt zwei neue Methoden zu allen Objekten hinzu, die die Schnittstellen Document
, DocumentFragment
oder Element
implementieren:
querySelector()
-
Gibt den ersten passenden
Element
-Knoten innerhalb des Unterbaums des Knotens zurück. Wenn kein passender Knoten gefunden wird, wirdnull
zurückgegeben. querySelectorAll()
-
Gibt eine
NodeList
zurück, die alle passendenElement
-Knoten innerhalb des Unterbaums des Knotens enthält, oder eine leereNodeList
, wenn keine Übereinstimmungen gefunden werden.
Hinweis: Die von querySelectorAll()
zurückgegebene NodeList
ist nicht live, was bedeutet, dass Änderungen im DOM nicht in der Sammlung widergespiegelt werden. Dies ist anders als bei anderen DOM-Abfragemethoden, die live Node-Lists zurückgeben.
Sie finden Beispiele und Details in der Dokumentation zu den Methoden Element.querySelector()
und Element.querySelectorAll()
.
Selektoren
Die Selektormethoden akzeptieren Selektoren, um zu bestimmen, welches Element oder welche Elemente zurückgegeben werden sollen. Dies schließt Selektorlisten ein, sodass Sie mehrere Selektoren in einer einzigen Abfrage gruppieren können.
Um die Privatsphäre der Nutzer zu schützen, werden einige Pseudoklassen nicht unterstützt oder verhalten sich anders. Zum Beispiel wird :visited
keine Übereinstimmungen zurückgeben und :link
wird als :any-link
behandelt.
Es können nur Elemente ausgewählt werden, daher werden Pseudoklassen nicht unterstützt.
Beispiele
Um alle Absatz- (p
) Elemente in einem Dokument auszuwählen, deren Klassen warning
oder note
enthalten, können Sie Folgendes tun:
const special = document.querySelectorAll("p.warning, p.note");
Sie können auch nach ID abfragen. Zum Beispiel:
const el = document.querySelector("#main, #basic, #exclamation");
Nach der Ausführung des obigen Codes enthält el
das erste Element im Dokument, dessen ID main
, basic
oder exclamation
ist.