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:

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

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

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

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