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:

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

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

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

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

Adottak bekezdések és egy gomb. A gomb megnyomásakor keresse meg az összes bekezdést, iteráljon rajtuk ciklussal, és állítsa minden bekezdés szövegét 'text' értékre.

Adottak bekezdések szöveggel és egy gomb. A gomb megnyomásakor írja minden bekezdés szövegének végére annak sorszámát.

Adottak számokkal kitöltött inputmezők, egy bekezdés és egy gomb. A gomb megnyomásakor keresse meg az inputmezőkben lévő számok összegét, és írja ezt az összeget a bekezdés szövegébe.