Auswahl und Traversierung im DOM-Baum
Die Selectors-API bietet Methoden, die es schnell und einfach machen, Element-Knoten aus dem DOM abzurufen, indem sie mit einer Reihe von Selektoren verglichen werden. Dies ist viel schneller als frühere Techniken, bei denen es beispielsweise notwendig war, eine Schleife im JavaScript-Code zu verwenden, um die spezifischen Elemente zu finden, die Sie benötigten.
Das NodeSelector-Interface
Diese Spezifikation fügt zwei neue Methoden zu allen Objekten hinzu, die die Document-, DocumentFragment- oder Element-Interfaces implementieren:
querySelector()-
Gibt den ersten passenden
Element-Knoten innerhalb des Knotensubbaums zurück. Wenn kein passender Knoten gefunden wird, wirdnullzurückgegeben. querySelectorAll()-
Gibt ein
NodeListzurück, das alle passendenElement-Knoten innerhalb des Knotensubbaums enthält, oder ein leeresNodeList, 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 reflektiert werden. Dies unterscheidet sich von anderen DOM-Abfragemethoden, die Live-Knotenlisten zurückgeben.
Sie finden Beispiele und Details, indem Sie die Dokumentation für die Methoden Element.querySelector() und Element.querySelectorAll() lesen.
Selektoren
Die Selektormethoden akzeptieren Selektoren, um zu bestimmen, welches Element oder welche Elemente zurückgegeben werden sollen. Dies schließt Selektorenlisten ein, sodass Sie mehrere Selektoren in einer einzigen Abfrage gruppieren können.
Zum Schutz der Privatsphäre des Benutzers 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 beinhalten, 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 Ausführung des obigen Codes enthält el das erste Element im Dokument, dessen ID eine von main, basic oder exclamation ist.