Een groep elementen verkrijgen in JavaScript

In eerdere lessen hebben we met de methode querySelector één element van de pagina verkregen. Nu is het tijd om te leren een groep elementen te verkrijgen en operaties uit te voeren met meerdere elementen tegelijk.

Hiervoor bestaat de methode querySelectorAll, die alle tags die voldoen aan de CSS selector verkrijgt in de vorm van een array van elementen. Om iets te doen met de gevonden elementen, moet je met de verkregen array werken, bijvoorbeeld door deze te herhalen met een lus en in de lus een bewerking uit te voeren met elk element afzonderlijk.

Stel, we hebben bijvoorbeeld paragrafen met de klasse www:

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

Laten we een array van deze paragrafen verkrijgen, deze herhalen met een lus en in de lus de teksten van de gevonden paragrafen naar de console uitvoeren:

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

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

Laten we nu aan het einde van de tekst van elke paragraaf een uitroepteken toevoegen:

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

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