JavaScript/DOM/Document/querySelectorAll

Die Methode Document.querySelectorAll() gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen.

Syntax

elements = document.querySelectorAll(selectors);

• selectors: Zeichenkette einer oder mehrere, durch Komma getrennten, Selektoren
• elements: Eine statische NodeList mit den gefundenen HTML Elementen

Die Methode ist außer für das Dokument-Objekt auch für Objekte mit den Schnittstellen DocumentFragment und Element definiert.

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 nach auch im CSS verwendeten Selektoren durchsuchen und diese dann zurückgeben.

CSS-Selektoren können Elemente, Klassen und Ids; aber eben auch Attributsselektoren sein, die sogar nach einem bestimmten Wert wie [aria-selected="true"] selektiert werden.

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

Anwendungsbeispiel

Beispiel ansehen …

<button id="finden">Ergebnis ausgeben</button>
<button id="aendern">ändern</button>

<p><output id="ausgabe"></output></p>
<div>
  <p class="beispiel">Dies ist der erste Absatz der Klasse "beispiel".</p>
  <p class="beispiel">Dies ist der zweite Absatz der Klasse "beispiel".</p>
  <p class="beispiel">Dies ist der dritte Absatz der Klasse "beispiel".</p>
</div>

Das Beispiel enthält 3 Absätze der Klasse beispiel. Zwei Buttons lösen Interaktionen aus, deren Ergebnis in einem output-Element ausgegeben wird.

Beispiel

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById('aendern').addEventListener('click',ändereCSS);
  document.getElementById('finden').addEventListener('click',finde);

function finde () {
  var ergebnis = document.querySelectorAll('p.beispiel');
  document.querySelector('output').innerText = ergebnis;
}	
  
function ändereCSS () {
  var absätze = document.querySelectorAll('p.beispiel'),
      index;
  for (index = 0; index < absätze.length; index++) {
    absätze[index].classList.add('geaendert');
  }
}

});

Die querySelectorAll()-Methode durchsucht den Elementbaum nach Elementen mit dem CSS-Selektor .beispiel.

Wenn Sie den linken Button klicken, wird die Funktion finde() aufgerufen, die das Ergebnis von querySelectorAll('p.beispiel') mittels innerText in das output-Element ausgibt.

Wenn Sie auf den rechten Button klicken, wird mit absätze.length die Anzahl der Absätze mit der Klasse beispiel ermittelt. In einer Schleife wird diesen Absätzen dann mit ClassList.add eine andere Klasse geaendert gegeben.

Weblinks

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

• css-tricks: Loop Over querySelectorAll Matches