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:

html<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:

javascriptlet 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:

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

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