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:

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

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

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

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

Er zijn paragrafen en een knop gegeven. Bij het klikken op de knop, vind alle paragrafen, herhaal ze met een lus en stel de tekst van elke paragraaf in op de waarde 'text'.

Er zijn paragrafen met tekst en een knop gegeven. Bij het klikken op de knop, schrijf aan het einde van de tekst van elke paragraaf zijn volgnummer.

Er zijn invoervelden met getallen, een paragraaf en een knop gegeven. Bij het klikken op de knop, vind de som van de getallen uit de invoervelden en schrijf deze som in de tekst van de paragraaf.