Dobijanje grupe elemenata u JavaScript

U prethodnim lekcijama smo pomoću metode querySelector dobijali jedan element stranice. Sada je vreme da naučimo kako da dobijemo grupu elemenata i izvršimo neke operacije odjednom na mnogo elemenata.

Za ovo postoji metoda querySelectorAll, koja dobija sve tagove koji odgovaraju CSS selektoru, u vidu niza elemenata. Da bismo uradili nešto sa pronađenim elementima, potrebno je da poradimo sa dobijenim nizom, na primer, prođemo kroz njega petljom i u petlji izvršimo neku operaciju sa svakim elementom pojedinačno.

Neka su, na primer, dati paragrafi sa klasom www:

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

Hajde da dobijemo niz ovih paragrafa, prođemo kroz njih petljom i u petlji ispišemo tekstove pronađenih paragrafa u konzolu:

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

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

A sada hajde da na kraj teksta svakog paragrafa dodamo uzvičnik:

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

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

Data su polja za unos (input) i dugme. Klikom na dugme pronađite sva polja za unos, prođite kroz njih petljom i postavite tekst svakog polja za unos na vrednost 'text'.

Data su polja za unos sa tekstom i dugme. Klikom na dugme upišite na kraj teksta svakog polja za unos njegov redni broj.

Data su polja za unos sa brojevima, paragraf i dugme. Klikom na dugme pronađite zbir brojeva iz polja za unos i upišite taj zbir u tekst paragrafa.