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:

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

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

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

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