querySelectorAll

querySelectorAll

querySelectorAll filtert Elemente mit Hilfe von CSS-Selektoren, auch mit Attribut-Selektoren, Kontext-Selektoren oder Pseudo-Selektoren. querySelectorAll() löst selbst komplexe CSS-Selektoren auf.

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  

Alle h2, die Kind von <section> oder einem .secondary-Element sind

const h2 = document.querySelectorAll(":is(section, .secondary) > h2");

Alle section-Elemente, in denen ein img-Element liegt

const iml = document.querySelectorAll("section:has(img)")

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 NodeList – zurück. Eine NodeList sieht aus wie ein Array, verhält sich ähnlich wie ein Array, ist aber kein Array.

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

[log] 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.

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

elements.forEach((img, index) => {
	console.log(index, img.getAttribute("alt"));
	let figcaption = document.createElement("figcaption");
	figcaption.textContent = index + " " + img.getAttribute ("alt")
	img.parentElement.appendChild (figcaption)
});

Oder nur jedes zweite Element:

const odds = document.querySelectorAll (".nodelist img:nth-child(odd)");
console.log (odds.length);

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. querySelectorAll liefert nur echte DOM-Element. Um Pseudo-Elemente zu finden, braucht querySelectorAll einen (nicht wirklich) kleinen Umweg über getComputedStyle.

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

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

<ul class="demolist">
	<li>for of / for each</li>
	<li>getComputedStyle</li>
	<li>Attribut-Selektor</li>
</ul>

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

// Erstes li-Element holen
const firstLi = document.querySelector(".demolist > li:first-child");

// ComputedStyle für ::before holen
const style = getComputedStyle(firstLi, "::before");

// Inhalt auslesen
console.log("Content von ::before:", style.content);

getComputedStyle(element, "::before") liefert alle CSS-Werte für das Pseudo-Element. style.content enthält, was in content: steht, z. B.: "url(\"rabbit.svg\")". Außerdem ist der Rückgabewert ein String und kein img-Element.

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

querySelectorAll und :scope

Während der CSS Pseudo-Selektor in CSS wenig Sinn macht, kommt er dem querySelector und querySelectorAll entgegen.