Obținerea unui grup de elemente în JavaScript

În lecțiile anterioare am folosit metoda querySelector pentru a obține un singur element de pagină. Acum a sosit timpul să învățăm cum să obținem un grup de elemente și să efectuăm operații cu mai multe elemente deodată.

Pentru aceasta există metoda querySelectorAll, care obține toate tag-urile care se potrivesc cu selectorul CSS sub forma unui tablou de elemente. Pentru a face ceva cu elementele găsite, este necesar să lucrăm cu tabloul obținut, de exemplu, să îl parcurgem cu un ciclu și în ciclu să executăm o anumită operație cu fiecare element în mod individual.

Să presupunem, de exemplu, că avem paragrafe cu clasa www:

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

Să obținem tabloul acestor paragrafe, să le parcurgem cu un ciclu și în ciclu să afișăm textele paragrafelor găsite în consolă:

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

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

Și acum să adăugăm un semn de exclamare la sfârșitul textului fiecărui paragraf:

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

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

Sunt date paragrafe și un buton. La click pe buton găsiți toate paragrafele, parcurgeți-le cu un ciclu și setați textul fiecărui paragraf la valoarea 'text'.

Sunt date paragrafe cu text și un buton. La click pe buton scrieți la sfârșitul textului fiecărui paragraf numărul său de ordine.

Sunt date input-uri cu numere, un paragraf și un buton. La click pe buton găsiți suma numerelor din input-uri și scrieți această sumă în textul paragrafului.