Elemcsoportok lekérése JavaScriptben

Az előző leckékben a querySelector metódussal kaptunk meg egy oldalelemet. Itt az ideje megtanulnunk, hogyan kérjünk le egy csoport elemet, és hogyan hajtsunk végre műveleteket egyszerre több elemmel.

Erre szolgál a querySelectorAll metódus, amely a CSS szelektor alá eső összes tagot egy elemtömbben adja vissza. Ahhoz, hogy valamit tegyünk a megtalált elemekkel, dolgoznunk kell a kapott tömbbel, például végig kell iterálnunk rajta egy ciklussal, és a ciklusban végre kell hajtani valamilyen műveletet minden egyes elemmel külön-külön.

Tegyük fel például, hogy vannak www osztályú bekezdéseink:

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

Kérjük le ezeknek a bekezdéseknek a tömbjét, iteráljunk rajtuk egy ciklussal, és a ciklusban írjuk ki a megtalált bekezdések szövegét a konzolra:

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

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

Most pedig adjunk hozzá egy felkiáltójelet minden bekezdés szövegéhez:

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

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