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 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 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 querySelector den (nicht wirklich) kleinen Umweg über getComputedStyle.

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

• for in 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");