Verkryging van 'n groep elemente in JavaScript

In vorige lesse het ons een blad element verkry met behulp van die metode querySelector. Nou is dit tyd om te leer hoe om 'n groep elemente te verkry en bewerkings gelyktydig op baie elemente uit te voer.

Hiervoor bestaan die metode querySelectorAll, wat alle etikette wat onder 'n CSS selektor val, in die vorm van 'n elemente-array verkry. Om 'n bewerking op die gevind elemente uit te voer, is dit nodig om met die verkrygde array te werk, byvoorbeeld, om dit met 'n lus te deurloop en in die lus 'n bepaalde bewerking op elke element afsonderlik uit te voer.

Gestel, byvoorbeeld, ons het paragrawe met die klas www:

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

Kom ons verkry 'n array van hierdie paragrawe, deurloop dit met 'n lus en in die lus die teks van elke gevind paragraaf na die konsole uitstuur:

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

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

Kom ons nou aan die einde van die teks van elke paragraaf 'n uitroepteken byvoeg:

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

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

Paragrawe en 'n knoppie word gegee. Met 'n kliek op die knoppie, vind alle paragrawe, deurloop hulle met 'n lus en stel die teks van elke paragraaf na die waarde 'text'.

Paragrawe met teks en 'n knoppie word gegee. Met 'n kliek op die knoppie, skryf aan die einde van die teks van elke paragraaf sy volgnommer by.

Invoervelde met getalle, 'n paragraaf en 'n knoppie word gegee. Met 'n kliek op die knoppie, vind die som van die getalle uit die invoervelde en skryf die som in die teks van die paragraaf.