Error al obtener un elemento en JavaScript
A veces, los programadores principiantes cometen el error
de usar para obtener un solo elemento DOM
el método querySelectorAll en lugar del método
querySelector.
Veamos las características propias de este error. Supongamos que tenemos un párrafo:
<p>texto</p>
Un programador decidió obtener y cambiar el texto de este párrafo. Para ello, obtuvo una referencia a este elemento en una variable, usando erróneamente el método incorrecto:
let elem = document.querySelectorAll('p');
Luego, el programador intentó cambiar el texto del párrafo. Sin embargo, el texto del párrafo no cambió:
elem.textContent = '!!!'; // no funcionó
Además, no apareció ningún error en la consola. El problema es que se realizó una operación válida, pero no sobre un elemento, sino sobre un grupo. Y leer o cambiar el texto de un grupo de elementos así no se puede - solo es posible iterando sobre ellos con un bucle y accediendo a cada elemento por separado.
Cómo detectar el error
Veamos cómo debería actuar el programador para detectar este error. En realidad, con algo de experiencia, es fácil de detectar por sus características.
Supongamos que, sin embargo, esto no ocurre. Entonces
la primera acción del programador al buscar errores
debería ser mostrar los valores de las variables
en la consola. En su caso, solo hay
una variable - elem. Necesita mostrar el valor
de esta variable y ver qué
contiene:
let elem = document.querySelectorAll('p');
console.log(elem); // mostrará un array, no un elemento
En la consola se ve inmediatamente que en la variable no hay un elemento, sino un array. Esto da inmediatamente una pista obvia de que se ha cometido un error en el método para obtener el elemento.
