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:

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

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

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

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

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

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

Dotas rindkopas un poga. Nospiežot pogu atrodiet visas rindkopas, iziet cauri tām ar ciklu un iestatiet katras rindkopas tekstu uz vērtību 'text'.

Dotas rindkopas ar tekstu un poga. Nospiežot pogu ierakstiet katra rindkopas teksta beigās tā kārtas numuru.

Doti ievades lauki ar skaitļiem, rindkopa un poga. Nospiežot pogu atrodiet skaitļu summu no ievades laukiem un ierakstiet šo summu rindkopas tekstā.