Hämta en grupp element i JavaScript

I tidigare lektioner har vi använt metoden querySelector för att hämta ett element på sidan. Nu är det dags att lära oss hur man hämtar en grupp element och utför operationer samtidigt med många element.

För detta finns metoden querySelectorAll, som hämtar alla taggar som matchar en CSS selektor, i form av en array av element. För att göra något med de hittade elementen, måste man arbeta med den erhållna arrayen, till exempel, iterera genom den med en loop och i loopen utföra någon operation med varje element var för sig.

Låt oss till exempel säga att vi har stycken med klassen www:

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

Låt oss hämta arrayen av dessa stycken, iterera igenom dem med en loop och i loopen skriva ut texten från de hittade styckena i konsolen:

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

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

Och låt oss nu lägga till ett utropstecken i slutet av texten i varje stycke:

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

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

Det finns stycken och en knapp. Vid klick på knappen, hitta alla stycken, iterera genom dem med en loop och sätt texten för varje stycke till värdet 'text'.

Det finns stycken med text och en knapp. Vid klick på knappen, skriv i slutet av texten för varje stycke dess ordningsnummer.

Det finns inmatningsfält med nummer, ett stycke och en knapp. Vid klick på knappen, hitta summan av numren från inmatningsfälten och skriv denna summa till styckets text.