Získanie skupiny prvkov v JavaScripte

V predchádzajúcich lekciách sme pomocou metódy querySelector získali jeden prvok stránky. Teraz je čas naučiť sa získať skupinu prvkov a vykonávať operácie s viacerými prvkami naraz.

Na to existuje metóda querySelectorAll, ktorá získava všetky elementy, ktoré spĺňajú CSS selektor, vo forme poľa prvkov. Ak chceme niečo urobiť s nájdenými prvkami, je potrebné pracovať s získaným poľom, napríklad prechádzať ho cyklom a v cykle vykonať akúkoľvek operáciu s každým prvkom samostatne.

Nech sú napríklad dané odseky s triedou www:

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

Získajme pole týchto odsekov, prejdime ich cyklom a v cykle vypíšme texty nájdených odsekov do konzoly:

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

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

A teraz na koniec textu každého odseku pridajme výkričník:

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

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

Sú dané odseky a tlačidlo. Po kliknutí na tlačidlo nájdite všetky odseky, prejdite ich cyklom a nastavte text každého odseku na hodnotu 'text'.

Sú dané odseky s textom a tlačidlo. Po kliknutí na tlačidlo zapíšte na koniec textu každého odseku jeho poradové číslo.

Sú dané vstupné polia s číslami, odsek a tlačidlo. Po kliknutí na tlačidlo nájdite súčet čísel z vstupných polí a zapíšte tento súčet do textu odseku.