Získání skupiny prvků v JavaScriptu

V předchozích lekcích jsme pomocí metody querySelector získávali jeden prvek stránky. Nyní je čas naučit se získat skupinu prvků a provádět nějaké operace s mnoha prvky najednou.

K tomu slouží metoda querySelectorAll, která získá všechny tagy, odpovídající CSS selektoru, ve formě pole prvků. Abyste s nalezenými prvky něco udělali, je třeba pracovat s získaným polem, například jej projít cyklem a v cyklu provést nějakou operaci s každým prvkem zvlášť.

Předpokládejme například, že máme dány odstavce s třídou www:

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

Získejme pole těchto odstavců, projděme je cyklem a v cyklu vypišme texty nalezených odstavců do konzole:

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

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

A nyní přidejme na konec textu každého odstavce vykřičník:

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

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

Jsou dány odstavce a tlačítko. Po kliknutí na tlačítko najděte všechny odstavce, projděte je cyklem a nastavte text každého odstavce na hodnotu 'text'.

Jsou dány odstavce s textem a tlačítko. Po kliknutí na tlačítko zapište na konec textu každého odstavce jeho pořadové číslo.

Jsou dány inputy s čísly, odstavec a tlačítko. Po kliknutí na tlačítko najděte součet čísel z inputů a zapište tento součet do textu odstavce.