Hentning af gruppe af elementer i JavaScript

I de foregående lektioner har vi ved hjælp af metoden querySelector hentet ét element fra siden. Nu er det tid til at lære at hente en gruppe af elementer og udføre handlinger med mange elementer på én gang.

For dette findes metoden querySelectorAll, som henter alle tags, der matcher en CSS selector, i form af et array af elementer. For at gøre noget med de fundne elementer, skal man arbejde med det modtagne array, for eksempel gennemløbe det med en løkke og i løkken udføre en handling med hvert element individuelt.

Lad os for eksempel sige, at vi har afsnit med klassen www:

<p class="www">text1</p>
<p class="www">text2</p>
<p class="www">text3</p>

Lad os hente arrayet af disse afsnit, gennemløbe dem med en løkke og i løkken udskrive teksterne af de fundne afsnit til konsollen:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	console.log(elem.textContent);
}

Og lad os nu tilføje et udråbstegn til slutningen af teksten i hvert afsnit:

let elems = document.querySelectorAll('.www');

for (let elem of elems) {
	elem.textContent = elem.textContent + '!';
}

Der gives afsnit og en knap. Ved klik på knappen skal du finde alle afsnit, gennemløbe dem med en løkke og indstille hvert afsnits tekst til værdien 'text'.

Der gives afsnit med tekst og en knap. Ved klik på knappen skal du skrive rækkenummeret bag ved teksten i hvert afsnit.

Der gives inputfelter med tal, et afsnit og en knap. Ved klik på knappen skal du finde summen af tallene fra inputfelterne og skrive denne sum i afsnittets tekst.