Λήψη ομάδας στοιχείων στο JavaScript

Στα προηγούμενα μαθήματα, χρησιμοποιώντας τη μέθοδο querySelector παίρναμε ένα στοιχείο της σελίδας. Τώρα ήρθε η ώρα να μάθουμε πώς να παίρνουμε μια ομάδα στοιχείων και να εκτελούμε κάποιες λειτουργίες με πολλά στοιχεία ταυτόχρονα.

Για αυτό υπάρχει η μέθοδος querySelectorAll, που λαμβάνει όλες τις ετικέτες που ταιριάζουν με τον CSS επιλογέα, σε μορφή πίνακα στοιχείων. Για να κάνουμε κάτι με τα στοιχεία που βρέθηκαν, πρέπει να δουλέψουμε με τον πίνακα που προέκυψε, για παράδειγμα, να τον διασχίσουμε με βρόχο και μέσα στο βρόχο να εκτελέσουμε κάποια λειτουργία με κάθε στοιχείο ξεχωριστά.

Ας υποθέσουμε, για παράδειγμα, ότι έχουμε παραγράφους με κλάση www:

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

Ας πάρουμε τον πίνακα με αυτές τις παραγράφους, ας τον διασχίσουμε με βρόχο και μέσα στο βρόχο ας εμφανίσουμε τα κείμενα των παραγράφων που βρέθηκαν στην κονσόλα:

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

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

Και τώρα ας προσθέσουμε ένα θαυμαστικό στο τέλος του κειμένου κάθε παραγράφου:

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

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

Δίνονται παράγραφοι και ένα κουμπί. Με κλικ στο κουμπί βρείτε όλες τις παραγράφους, διασχίστε τις με βρόχο και ορίστε το κείμενο κάθε παραγράφου στην τιμή 'text'.

Δίνονται παράγραφοι με κείμενο και ένα κουμπί. Με κλικ στο κουμπί γράψτε στο τέλος του κειμένου κάθε παραγράφου τον αύξοντα αριθμό της.

Δίνονται πεδία εισαγωγής με αριθμούς, μια παράγραφος και ένα κουμπί. Με κλικ στο κουμπί βρείτε το άθροισμα των αριθμών από τα πεδία εισαγωγής και γράψτε αυτό το άθροισμα στο κείμενο της παραγράφου.