Elementų grupės gavimas JavaScript

Ankstesnėse pamokose mes naudojome metodą querySelector, kad gautume vieną puslapio elementą. Dabar atėjo laikas išmokti gauti elementų grupę ir atlikti tam tikrus veiksmus iš karto su daugeliu elementų.

Tam yra skirtas metodas querySelectorAll, kuris gauna visus žymes, atitinkančias CSS selektorių, kaip elementų masyvą. Norint ką nors padaryti su rastais elementais, reikia dirbti su gautu masyvu, pavyzdžiui, pereiti jį ciklu ir cikle atlikti tam tikrą operaciją su kiekvienu elementu atskirai.

Tarkime, pavyzdžiui, kad turime pastraipas su klase www:

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

Gaukime šių pastraipų masyvą, pereikime jį ciklu ir cikle atspausdinkime rastų pastraipų tekstus konsolėje:

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

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

O dabar kiekvienos pastraipos teksto pabaigoje pridėkime šauktuką:

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

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

Duotos pastraipos ir mygtukas. Paspaudus mygtuką raskite visas pastraipas, pereikite jas ciklu ir nustatykite kiekvienos pastraipos tekstą į reikšmę 'text'.

Duotos pastraipos su tekstu ir mygtukas. Paspaudus mygtuką įrašykite kiekvienos pastraipos teksto pabaigon jos eilės numerį.

Duoti įvesties laukai su skaičiais, pastraipa ir mygtukas. Paspaudus mygtuką raskite skaičių iš įvesties laukų sumą ir įrašykite šią sumą į pastraipos tekstą.