JavaScript/DOM/ParentNode/querySelector

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

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

querySelector stellt eine Verbindung zwischen DOM und CSS her. Du kannst für die Suche die ganze Bandbreite der in CSS verfügbaren Selektoren und Kombinatoren nutzen, auch eine durch Komma getrennte Auflistung mehrerer Selektoren.

Syntax

element = parentNode.querySelector(selector);

• parentNode: DOM Knoten, der Ausgangspunkt der Suche ist (Dokument, Dokumentfragment oder Element)
• selector: 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 ansehen …

<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.

Beachte: 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, verwendest du querySelectorAll().

CSS Escapes in ID Selektoren

Beachte, bei ID-Selektoren für IDs, die CSS Escapes benötigen, dass ein Backslash-Zeichen auch für JavaScript spezielle Bedeutung hat. Wenn du ein HTML Element mit id="1234" finden möchtest, 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