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

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

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

<p>κείμενο</p>

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

let elem = document.querySelectorAll('p');

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

elem.textContent = '!!!'; // δεν λειτούργησε

Παράλληλα, κανένα σφάλμα δεν εμφανίστηκε στην κονσόλα. Το γεγονός είναι ότι εκτελέστηκε μια επιτρεπτή πράξη, αλλά όχι πάνω σε ένα στοιχείο, αλλά πάνω σε μια ομάδα. Και η ανάγνωση ή η αλλαγή του κειμένου μιας ομάδας στοιχείων δεν μπορεί να γίνει απλά έτσι - μόνο διατρέχοντας τα με έναν βρόχο και προσπελάζοντας το καθένα στοιχείο ξεχωριστά.

Πώς να εντοπίσετε το σφάλμα

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

Ας υποθέσουμε, ωστόσο, ότι αυτό δεν συνέβη. Τότε η πρώτη κίνηση του προγραμματιστή στην αναζήτηση σφαλμάτων πρέπει να είναι η εμφάνιση των τιμών των μεταβλητών στην κονσόλα. Στην περίπτωσή του υπάρχει μόνο μία μεταβλητή - η elem. Πρέπει να εμφανίσετε την τιμή αυτής της μεταβλητής και να δείτε τι περιέχει:

let elem = document.querySelectorAll('p');
console.log(elem); // θα εμφανίσει έναν πίνακα, και όχι ένα στοιχείο

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