Elementų grupės gavimas JavaScript

Ankstesnėse pamokose mes naudojome metodą querySelector, kad gautume vieną puslapio elementą. Dabar atėjo laikas išmokti gauti elementų grupę ir atlikti tam tikrus veiksmus iš karto su daugeliu elementų.

Tam yra skirtas metodas querySelectorAll, kuris gauna visus žymes, atitinkančias CSS selektorių, kaip elementų masyvą. Norint ką nors padaryti su rastais elementais, reikia dirbti su gautu masyvu, pavyzdžiui, pereiti jį ciklu ir cikle atlikti tam tikrą operaciją su kiekvienu elementu atskirai.

Tarkime, pavyzdžiui, kad turime pastraipas su klase www:

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

Gaukime šių pastraipų masyvą, pereikime jį ciklu ir cikle atspausdinkime rastų pastraipų tekstus konsolėje:

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

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

O dabar kiekvienos pastraipos teksto pabaigoje pridėkime šauktuką:

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

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