JavaScript/DOM/ParentNode/querySelectorAll

Die Methode querySelectorAll() der ParentNode-Schnittstelle gibt diejenigen Elemente zurück, auf die 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.

Das Ergebnis des Methodenaufrufs ist ein statisches NodeList-Objekt mit den gefundenden Elementen. Wird nichts gefunden, ist die NodeList leer.

querySelectorAll 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

nodeList = parentNode.querySelectorAll(selectors);

• parentNode: DOM Knoten, der Ausgangspunkt der Suche ist (Dokument, Dokumentfragment oder Element)
• selectors: Zeichenkette einer oder mehrere, durch Komma getrennten, Selektoren
• nodeList : NodeList-Objekt (statisch)

Mit getElementById kann nur ein einziges Element identifizert werden; das Durchsuchen einer mit document.getElementsByTagName("p") 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 nach auch im CSS verwendeten Selektoren durchsuchen und diese dann zurückgeben.

CSS-Selektoren können Elemente, Klassen und Ids; aber auch Attributsselektoren sein, um beispielsweise Elemente mit [aria-selected="true"] zu finden.

Beachten Sie:
Beachten Sie auch den Hinweis zu ID-Selektoren im Wiki-Artikel zu querySelector.

Anwendungsbeispiel

Änderung mehrerer Elemente gleichzeitig ansehen …

  document.getElementById('changer').addEventListener('click', changeClasses);

  function changeClasses() {
		const elements = document.querySelectorAll('article > .beispiel');

    elements.forEach(function (element) {
      element.classList.add('geändert');
    });
  }

Das Beispiel zeigt einen Button, dessen click-Event die changeClasses Funktion aufruft. Es folgt ein article mit drei Absätzen als „Spielmaterial“, plus ein weiterer Absatz.

Im Beispiel werden bei click auf den Button alle Absätze mit Klasse beispiel, die direkte Kindelemente eines <article>-Elements sind, selektiert. Alle Ergebnisse werden in elements gesammelt und in einer ForEach-Schleife durchlaufen. Dort erhalten diese Absätzen dann mit classList.add eine weitere Klasse geändert.

Beachten Sie: Eine NodeList sieht zwar aus wie ein Array - ist aber keins. Die verfügbaren Eigenschaften und Methoden finden Sie im zugehörigen Referenzartikel. Eine NodeList mit forEach() zu durchlaufen ist eine Erweiterung von 2016 und daher in älteren Browsern nicht verfügbar.

Siehe auch

• JavaScript/Tutorials/DOM/Was ist das DOM

Weblinks

• W3C: Selectors API
• MDN: document.querySelectorAll
• Microsoft-Doku: Selectors API

• css-tricks: Loop Over querySelectorAll Matches