Henting av gruppe av elementer i JavaScript

I tidligere leksjoner har vi ved hjelp av metoden querySelector hentet ett element på siden. Nå er det på tide å lære å hente en gruppe elementer og utføre operasjoner med mange elementer samtidig.

For dette finnes metoden querySelectorAll, som henter alle tagger som matcher en CSS selector, i form av en matrise av elementer. For å gjøre noe med de funnede elementene, må man jobbe med den resulterende matrisen, for eksempel gå gjennom den med en løkke og i løkken utføre en operasjon med hvert element individuelt.

La oss for eksempel si at vi har avsnitt med klassen www:

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

La oss hente matrisen av disse avsnittene, gå gjennom dem med en løkke og i løkken skrive ut tekstene til de funnede avsnittene i konsollen:

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

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

Og la oss nå legge til et utropstegn på slutten av teksten i hvert avsnitt:

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

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

Det er gitt avsnitt og en knapp. Ved klikk på knappen, finn alle avsnitt, gå gjennom dem med en løkke og sett teksten i hvert avsnitt til verdien 'text'.

Det er gitt avsnitt med tekst og en knapp. Ved klikk på knappen, skriv på slutten av teksten i hvert avsnitt dets ordensnummer.

Det er gitt input-felter med tall, et avsnitt og en knapp. Ved klikk på knappen, finn summen av tallene fra input-feltene og skriv denne summen inn i avsnittets tekst.