Erreur de récupération d'un élément en JavaScript

Parfois, les programmeurs débutants commettent l'erreur d'utiliser pour récupérer un seul élément DOM la méthode querySelectorAll au lieu de la méthode querySelector.

Examinons les caractéristiques typiques de cette erreur. Supposons qu'il y ait un paragraphe :

Un certain programmeur a décidé de récupérer et de modifier le texte de ce paragraphe. Pour cela, il a obtenu une référence à cet élément dans une variable, en utilisant par erreur la mauvaise méthode :

Ensuite, le programmeur a tenté de modifier le texte du paragraphe. Cependant, le texte du paragraphe n'a pas changé :

Et aucune erreur n'est apparue dans la console. Le fait est qu'une opération valide a été exécutée, mais pas sur un seul élément, sur un groupe. Et il est impossible de lire ou de modifier le texte d'un groupe d'éléments simplement comme ça - seulement en les parcourant avec une boucle et en accédant à chaque élément individuellement.

Comment détecter l'erreur

Voyons comment un programmeur doit procéder pour détecter cette erreur. En réalité, avec un peu d'expérience, elle est facile à détecter grâce à ses signes caractéristiques.

Supposons que ce ne soit pas le cas. Alors la première action du programmeur lors de la recherche d'erreurs devrait être d'afficher les valeurs des variables dans la console. Dans son cas, il n'y a qu'une seule variable - elem. Il faut afficher la valeur de cette variable et regarder ce qu'elle contient :

Dans la console, on voit immédiatement que la variable ne contient pas un seul élément, mais un tableau. Cela donne immédiatement un indice évident qu'une erreur a été commise dans la méthode de récupération de l'élément.