Javascript querySelectorAll

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

querySelectorAll mit mehreren Selektoren

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.

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")));