Σφάλμα λήψης στοιχείων στο JavaScript

Μερικές φορές οι αρχάριοι προγραμματιστές κάνουν το λάθος να χρησιμοποιούν τη μέθοδο querySelector για τη λήψη μιας ομάδας στοιχείων DOM αντί για τη μέθοδο querySelectorAll.

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

<p>1</p>
<p>2</p>
<p>3</p>

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

let elems = document.querySelector('p');

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

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

Ως αποτέλεσμα, θα εμφανιστεί στην κονσόλα ένα χαρακτηριστικό σφάλμα elems is not iterable. Αυτό σημαίνει ότι η μεταβλητή elems δεν είναι iterable, δηλαδή δεν είναι πίνακας ή κάτι που μπορεί να διατρέξει κανείς μέσω του βρόχου for-of.