Elementu grupas iegūšana JavaScript

Iepriekšējās nodarbībās mēs ar metodes querySelector palīdzību iegūjām vienu lapas elementu. Tagad ir pienācis laiks iemācīties iegūt elementu grupu un veikt kādas darbības uzreiz ar daudziem elementiem.

Šim nolūkam pastāv metode querySelectorAll, kas iegūst visus tagus, kas atbilst CSS selektoram, elementu masīva veidā. Lai kaut ko izdarītu ar atrastajiem elementiem, ir jāstrādā ar iegūto masīvu, piemēram, jāiziet cauri to ar ciklu un cilpā jāveic kāda darbība ar katru elementu atsevišķi.

Pieņemsim, ka, piemēram, mums ir doti rindkopas ar klasi www:

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

Iegūstam šo rindkopu masīvu, iziesim cauri tam ar ciklu un cilpā izvadīsim atrasto rindkopu tekstus konsolē:

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

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

Un tagad pievienosim katra rindkopas teksta beigās izsaukuma zīmi:

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

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