Fout bij het ophalen van elementen in JavaScript

Soms maken beginnende programmeurs de fout om voor het ophalen van een groep DOM-elementen de methode querySelector te gebruiken in plaats van de methode querySelectorAll.

Laten we kijken naar de karakteristieke kenmerken van deze fout. Stel er zijn alinea's gegeven:

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

Een programmeur besloot om de teksten van deze alinea's op te halen en naar de console uit te voeren. Hiervoor haalde hij de verwijzingen naar deze elementen op in een variabele, maar gebruikte per ongeluk de verkeerde methode:

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

Vervolgens besloot hij de alinea's te doorlopen met een lus en de tekst van elke alinea naar de console uit te voeren:

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

Als resultaat verschijnt er een karakteristieke fout in de console: elems is not iterable. Deze zegt dat de variabele elems niet iterable is, wat betekent dat het geen array is of iets dat doorlopen kan worden met een for-of lus.