Die Selektoren-API stellt Methoden zur Verfügung, mit der man schnell und einfach Element-Knoten im DOM abrufen kann, indem sie mit einer Menge an Selektoren abgeblichen werden. Dies ist viel schneller als bisherige Techniken, bei denen es zum Beispiel notwendig war, eine Schleife im JavaScript-Code zu verwenden, um die spezifischen Elemente zu finden, die Sie suchen.

Die NodeSelector Schnittstelle

Diese Spezifikation fügt zwei neue Methoden zu jedem Objekt hinzu, welches die Document, DocumentFragment oder Element Schnittstelle implementiert:

querySelector
Gibt den ersten übereinstimmenden Element-Knoten innerhalb der Teilstruktur des Knotens zurück. Wenn kein übereinstimmender Knoten gefunden wird, wird null zurückgegeben.
querySelectorAll
Gibt eine NodeList zurück, die alle übereinstimmenden Element-Knoten in der Teilstruktur des Knotens enthält oder eine leere NodeList, wenn keine Übereinstimmungen gefunden werden.
Hinweis: Die NodeList, die von querySelectorAll() zurückgegeben wird, ist nicht live, was bedeutet, dass Änderungen im DOM sich nicht auf die Sammlung auswirken. Dies unterscheidet sich von anderen DOM-Abfragemethoden, die Live-Knotenlisten zurückgeben.

Beispiele und Details finden Sie in der Dokumentation zu den Methoden Element.querySelector() und Element.querySelectorAll() sowie im Artikel Code-Ausschnitte für querySelector.

Selektoren

Die Selektormethoden akzeptieren einen oder mehrere durch Kommas getrennte Selektoren, um zu bestimmen, welches Element bzw. welche Elemente zurückgegeben werden sollen. Um beispielsweise alle Absatz-Elemente (p) in einem Dokument auszuwählen, deren CSS-Klasse entweder eine warning oder ein note ist, können Sie folgendes schreiben:

var special = document.querySelectorAll( "p.warning, p.note" );

Sie können auch die ID abfragen. Zum Beispiel:

var el = document.querySelector( "#main, #basic, #exclamation" );

Nachdem der obige Code ausgeführt wurde, enthält el das erste Element im Dokument, dessen ID main, basic oder exclamation ist.

Sie können jegliche CSS Selektoren mit den Methoden querySelector() und querySelectorAll() verwenden.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: manfredkogler, mdnwebdocs-bot, SebinNyshkim
Zuletzt aktualisiert von: manfredkogler,