Errore nel recupero di un elemento in JavaScript
A volte i programmatori principianti commettono l'errore
di utilizzare per recuperare un singolo elemento DOM
il metodo querySelectorAll invece del metodo
querySelector.
Diamo un'occhiata alle caratteristiche tipiche di questo errore. Supponiamo che ci sia un paragrafo:
<p>testo</p>
Un programmatore ha deciso di recuperare e modificare il testo di questo paragrafo. Per fare ciò, ha ottenuto un riferimento a questo elemento in una variabile, utilizzando erroneamente il metodo sbagliato:
let elem = document.querySelectorAll('p');
Poi il programmatore ha tentato di modificare il testo del paragrafo. Tuttavia, il testo del paragrafo non è cambiato:
elem.textContent = '!!!'; // non ha funzionato
Inoltre, non è apparso alcun errore nella console. Il fatto è che è stata eseguita un'operazione valida, ma non su un singolo elemento, ma su un gruppo. E leggere o modificare il testo di un gruppo di elementi così semplicemente non è possibile - solo iterando attraverso di essi con un ciclo e accedendo a ciascun elemento singolarmente.
Come individuare l'errore
Vediamo come un programmatore dovrebbe agire per individuare questo errore. In realtà, con un po' di esperienza, è facile da individuare grazie ai segni caratteristici.
Supponiamo, tuttavia, che questo non accada. Allora
la prima azione del programmatore durante la ricerca degli errori
dovrebbe essere la stampa dei valori delle variabili
in console. Nel suo caso c'è solo
una variabile - elem. È necessario stampare il valore
di questa variabile e guardare cosa
contiene:
let elem = document.querySelectorAll('p');
console.log(elem); // stamperà un array, non un singolo elemento
In console si vede immediatamente che nella variabile non c'è un singolo elemento, ma un array. Questo fornisce immediatamente un indizio ovvio sul fatto che è stato commesso un errore nel metodo per recuperare l'elemento.
