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:

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

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

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

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