querySelectorAll

querySelectorAll

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

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

querySelectorAll filtert Elemente mit Hilfe von CSS-Selektoren, auch mit Attribut-Selektoren, Kontext-Selektoren oder Pseudo-Selektoren.

document.querySelectorAll('main img')          alle img-Elemente 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
document.querySelectorAll('img[src*="/img/"]') alle Bilder mit der Zeichenkette /img/ im src-Attribut  

querySelectorAll mit mehreren Selektoren

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

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.

const 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

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 ist forEach mit der Pfeil-Notation (Arrow-Funktions sind ein weiteres schwarzes Loch in IE11).

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

Oder – wenn ein EventListener mit forEach eingesetzt wird

let elements = document.querySelectorAll (".box");
elements.forEach (function (elem) {
	elem.addEventListener ("click", function () {
		…
		console.log ("Take this");
	})
})

Mit ES6 ist das fantastische for of angekommen (nicht in IE11), das ebenfalls über NodeLists aus querySelectorAll iteriert.

const elements = document.querySelectorAll ("section");
for (item of elements) console.log (item.getAttribute("data-title"));

querySelectorAll und before / after

Während HTML-Attribute sozusagen sichtbar im Markup der Seite liegen, werden die Pseudo-Selektoren wie ::before und ::after im CSS notiert und sind im HTML nicht vorhanden. Um sie dort zu finden, braucht querySelectorAll einen (nicht wirklich) kleinen Umweg über getComputedStyle.

li:nth-child(1)::before {
	content: url('rabbit-1.svg');
}

• for of / for each
• getComputedStyle
• Attribut-Selektor

getComputedStyle(document.querySelector("li"), 
    "::before").getPropertyValue("content");

Javascript findet zwar das Bild, das vor den Eintrag gesetzt wurde, mit Hilfe von getComputedStyle, aber hat keinen Zugriff mit ::before / ::after auf Elemente, denn Pseudo-Elemente sind kein Teil des DOM.

So funktioniert das also nicht:

let elem = document.querySelector("li::before");