Erreur de récupération d'éléments en JavaScript

Parfois, les programmeurs débutants commettent une erreur en utilisant pour récupérer un groupe d'éléments DOM la méthode querySelector au lieu de la méthode querySelectorAll.

Examinons les caractéristiques typiques de cette erreur. Supposons que nous ayons des paragraphes :

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

Un certain programmeur a décidé de récupérer et d'afficher dans la console les textes de ces paragraphes. Pour cela, il a obtenu les références vers ces éléments dans une variable, en utilisant par erreur la mauvaise méthode :

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

Ensuite, il a décidé de parcourir les paragraphes avec une boucle et d'afficher le texte de chaque paragraphe dans la console :

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

En conséquence, une erreur caractéristique apparaîtra dans la console : elems is not iterable. Elle indique que la variable elems n'est pas itérable, c'est-à-dire qu'elle n'est pas un tableau ou quelque chose que l'on peut parcourir avec une boucle for-of.