JavaScript/DOM/ParentNode/querySelector

Die Methode querySelector() der ParentNode-Schnittstelle gibt das erste Element zurück, auf das der übergebene Selektor passt. Wenn Sie die Methode auf dem Dokument-Objekt aufrufen, erfolgt die Suche so, wie Sie es aus Stylesheets gewohnt sind. Beim Aufruf auf einem Dokumentfragment- oder einem Elementknoten wird dieser Knoten als Ausgangspunkt der Suche verwendet und nur dessen Nachfahrenknoten einbezogen. Sie müssen den Selektor dann so formulieren, als sei dieser Ausgangspunkt das Dokument.

Wird kein passender Knoten gefunden, gibt die Methode null zurück.

querySelector ist eine Methode des CSS Objektmodells (CSSOM), Sie können daher als Parameter die ganze Bandbreite der in CSS verfügbaren Selektoren und Kombinatoren nutzen, auch eine durch Komma getrennte Auflistung mehrerer Selektoren.

Syntax

element = parentNode.querySelector(selectors);

• parentNode: DOM Knoten, der Ausgangspunkt der Suche ist (Dokument, Dokumentfragment oder Element)
• selectors: Zeichenkette mit einem gültigen CSS Selektor
• element: Element-Objekt

Mit getElementById kann nur ein einziges Element identifizert werden; das Durchsuchen der mit document.getElementsByTagName("p")[0] etc. erzeugten live node list ist mitunter ziemlich umständlich. Deshalb wurden mit querySelector() und querySelectorAll() zwei Methoden eingeführt, die eine Seite bequem und komfortabel mit Hilfe der auch im CSS verwendeten Selektoren durchsuchen und die gefundenen Elemente als NodeList zurückgeben.

CSS-Selektoren können Elemente, Klassen und Ids; aber eben auch Attributsselektoren sein, die einen bestimmten Wert haben. In diesem Beispiel wird z. B. der Attributselektor [aria-selected="true"] abgefragt.

Anwendungsbeispiele

Die hier gezeigten Beispiele verwenden das Dokument als Ausgangspunkt der Suche, die Methode funktioniert aber auch für Elemente oder in Dokumentfragmenten.

Beispiel So sieht's aus

<p>Klicken Sie auf den Button, um den ersten Absatz der Klasse „beispiel“ zu ändern.</p>
 
<button>Los!</button>
 
<p class="beispiel">Dies ist ein Absatz der Klasse „beispiel“.</p>
<p class="beispiel">Dies ist ein Absatz der Klasse „beispiel“.</p>

  document.querySelector('button').addEventListener('click',Aendern);
  function Aendern() {
    document.querySelector('.beispiel').innerHTML = "Nur der erste Absatz wurde erfasst.";
  }

Die querySelector()-Methode durchsucht den Elementbaum nach einem Element mit dem CSS-Selektor .beispiel. Mittels innerHTML wird dann der Inhalt geändert. Zuvor wird für das Button-Element ein Eventhandler registriert.

Falls es keinen Treffer gibt, wird Null zurückgegeben.

Beachten Sie: Die querySelector()-Methode gibt nur das erste Element, auf das der Selektor passt, zurück. Um alle Elemente mit den entsprechenden CSS-Selektoren zurückzugeben, verwenden Sie querySelectorAll().

CSS Escapes in ID Selektoren

Beachten Sie, bei ID-Selektoren für IDs, die CSS Escapes benötigen, darauf, dass ein Backslash-Zeichen auch für JavaScript spezielle Bedeutung hat. Wenn Sie ein HTML Element mit id="1234" finden möchten, dann reicht

let elem = document.querySelector("#\31 234");

nicht. Der Backslash muss für JavaScript escaped werden, damit das CSS API einen einfachen Backslash präsentiert bekommt. Richtig ist also:

let elem = document.querySelector("#\\31 234");

Weblinks

• W3C: Selectors API
• MDN: parentNode.querySelector