JavaScript/DOM/Document/querySelectorAll

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document
Wechseln zu: Navigation, Suche

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.

  • IE 8
  • Firefox
  • Chrome
  • Safari
  • Opera

Syntax

elements = document.querySelectorAll(selectors);

  • selectors: Zeichenkette einer oder mehrere, durch Komma getrennten, Selektoren
  • element: Liste von Element-Objekten

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

Inhaltsverzeichnis

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.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
    <p>Klicken Sie auf den linken Button, um das Ergebnis für <code>querySelectorAll</code> zu erhalten.</p>
    <p>Durch einen Klick auf den rechten Button ändern Sie die Hintergrundfarbe aller Absätze mit der Klasse "beispiel".</p>
    <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 mit der class="beispiel".</p>
      <p class="beispiel">Dies ist der zweite Absatz mit der class="beispiel".</p>
      <p class="beispiel">Dies ist der dritte Absatz mit der class="beispiel".</p>
    </div>
Das Beispiel enthält 3 Absätze mit der Klasse beispiel. Zwei Buttons lösen Interaktionen aus, deren Ergebnis in einem output-Element ausgegeben werden kann.
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. Dies ist immer eine [object NodeList], eine live nodeList.

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[Bearbeiten]