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:

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

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

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

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

Antud on lõigud ja nupp. Vajutades nuppu leidke kõik lõigud, läbige need tsükliga ja määrake iga lõigu tekst väärtuseks 'text'.

Antud on lõigud tekstiga ja nupp. Vajutades nuppu kirjutage iga lõigu teksti lõppu selle järjekorranumber.

Antud on sisendväljad numbritega, lõik ja nupp. Vajutades nuppu leidke sisendväljade numbrite summa ja kirjutage see summa lõigu tekstisse.