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:

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

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

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

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

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

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

Dane są akapity i przycisk. Po naciśnięciu przycisku znajdź wszystkie akapity, przejdź przez nie pętlą i ustaw tekst każdego akapitu na wartość 'text'.

Dane są akapity z tekstem i przycisk. Po naciśnięciu przycisku zapisz na końcu tekstu każdego akapitu jego numer porządkowy.

Dane są inputy z liczbami, akapit i przycisk. Po naciśnięciu przycisku znajdź sumę liczb z inputów i zapisz tę sumę w tekście akapitu.