querySelectorAll

querySelectorAll alle Elemente mit einem CSS-Selektor, am liebsten alle Elemente mit einer CSS-Klasse

querySelectorAll ist ein Gegenstück zu jQuery $(). querySelectorAll gibt alle Element mit einem CSS-Selektor (z.B. h2 oder img.small) als NodeList zurück. NodeLists sehen aus wie Arrays, sind aber tatsächlich statische Listen.

querySelectorAll() löst selbst komplexe CSS-Selektoren auf, die Methoden wie getElementsByTagName oder getElementsByClassName nur mit großem Aufwand umsetzen.

let images = document.querySelectorAll ("img");

querySelectorAll

document.querySelectorAll('main img')          alle Bilder unterhalb von main     
document.querySelectorAll('.ci.post')          alle Element mit class="post ci"
document.querySelectorAll('input[type="number"]') alle inputs mit type="number"
document.querySelectorAll('li:nth-child(odd)') alle li-Element mit ungeradem Index           

Genauso wie CSS-Selektoren in einer von Kommas getrennten Liste gemeinsame Eigenschaften zugewiesen werden, sammelt querySelectorAll alle Elemente.

document.querySelectorAll("h3, blockquote, .myclass")

Hier landen alle h3-Elemente, alle Blockquotes und alle Elemente mit class="myclass" im Ergebnis.

querySelectorAll durchlaufen

querySelectorAll() gibt alle Fundstellen als statische NodeList – staticNodeList – zurück. Eine NodeList sieht aus wie ein Array, verhält sich ähnlich wie ein Array, ist aber kein Array.

Eine statische NodeList ist von folgenden Änderungen des DOM-Baums nicht betroffen.

Ananas
Kiwi
Kokos
Melone
Was ist das?
Apfelsine

Die Eigenschaft length liefert die Anzahl der Fundstellen. Javascript kann also durch die Liste der Fundstellen wie bei einem Array mit einer for-Anweisung iterieren.

let elements = document.querySelectorAll (".nodelist img");
console.log (elements.length);
for (let i=0; i<elements.length; i++) {
	// Mach was … 
}

Die Elemente der NodeList lassen sich über den Index ansprechen.

	
console.log (elements[3].getAttribute("alt"));
Melone

querySelectorAll mit forEach durchlaufen

Eleganter durchläuft forEach die NodeList, die Zahl der gefundenen Elemente wird nicht gebraucht. Das funktioniert in allen modernen Browsern, aber für querySelectorAll mit forEach braucht IE11 noch ein Polyfill.

let elements = document.querySelectorAll (".nodelist img");

elements.forEach(function(img, index) {
   console.log( img.getAttribute("alt") );
});

So elegant wie jQuery wäre forEach es mit der Pfeil-Notation, aber die Arrow-Funktion gehört noch zu den schwarzen Löchern von IE11.

elements.forEach (img => console.log (img.getAttribute("alt")));
querySelectorAll