Elementide grupi hankimine JavaScriptis

Eelmistes õppetükides saime meetodi querySelector abil leida ühe lehe elemendi. Nüüd on aeg õppida hankima elementide rühma ja tegema mingid tehted korraga paljude elementidega.

Selleks on olemas meetod querySelectorAll, mis saab kõik CSS-selektorile vastavad sildid kujul elementide massiivist. Et teha midagi leitud elementidega, tuleb töötada saadud massiiviga, näiteks läbida see tsükliga ja tsüklis teha mingi tehte iga elemendiga eraldi.

Oletame näiteks, et meil on lõigud klassiga www:

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

Hankime nende lõikude massiiv, läbime need tsükliga ja tsüklis väljastame leitud lõikude tekstid konsooli:

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

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

Ja nüüd paneme iga lõigu teksti lõppu hüüumärgi:

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

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