Abrufen einer Gruppe von Elementen in JavaScript

In vorherigen Lektionen haben wir mit der Methode querySelector ein einzelnes Element einer Seite abgerufen. Jetzt ist es an der Zeit, zu lernen, wie man eine Gruppe von Elementen abruft und Operationen gleichzeitig mit vielen Elementen durchführt.

Dafür gibt es die Methode querySelectorAll, die alle Tags, die auf den CSS-Selektor zutreffen, in Form eines Arrays von Elementen erhält. Um etwas mit den gefundenen Elementen zu machen, muss man mit dem erhaltenen Array arbeiten, zum Beispiel es mit einer Schleife durchlaufen und in der Schleife eine Operation mit jedem Element einzeln ausführen.

Nehmen wir zum Beispiel an, wir haben Absätze mit der Klasse www:

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

Lassen Sie uns das Array dieser Absätze abrufen, es mit einer Schleife durchlaufen und in der Schleife die Texte der gefundenen Absätze in der Konsole ausgeben:

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

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

Und jetzt lassen Sie uns am Ende des Textes jedes Absatzes ein Ausrufezeichen hinzufügen:

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

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

Gegeben sind Absätze und ein Button. Beim Klick auf den Button finden Sie alle Absätze, durchlaufen Sie diese mit einer Schleife und setzen Sie den Text jedes Absatzes auf den Wert 'text'.

Gegeben sind Absätze mit Text und ein Button. Beim Klick auf den Button schreiben Sie am Ende des Textes jedes Absatzes seine fortlaufende Nummer.

Gegeben sind Input-Felder mit Zahlen, ein Absatz und ein Button. Beim Klick auf den Button ermitteln Sie die Summe der Zahlen aus den Input-Feldern und schreiben Sie diese Summe in den Text des Absatzes.