Pobieranie grupy elementów w JavaScript

W poprzednich lekcjach za pomocą metody querySelector pobieraliśmy jeden element strony. Teraz nadszedł czas, aby nauczyć się pobierać grupę elementów i wykonywać jakieś operacje na wielu elementach na raz.

Służy do tego metoda querySelectorAll, która pobiera wszystkie tagi pasujące do selektora CSS w postaci tablicy elementów. Aby zrobić coś ze znalezionymi elementami, trzeba pracować z otrzymaną tablicą, na przykład przejść przez nią pętlą i w pętli wykonać jakąś operację na każdym elemencie osobno.

Załóżmy, na przykład, że mamy akapity z klasą www:

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

Pobierzmy tablicę tych akapitów, przejdźmy przez nią pętlą i w pętli wypiszmy teksty znalezionych akapitów do konsoli:

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

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

A teraz dodajmy na koniec tekstu każdego akapitu wykrzyknik:

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

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