Fel vid hämtning av element i JavaScript

Ibland gör nybörjareprogrammerare misstag genom att använda metoden querySelector för att hämta en grupp DOM-element istället för metoden querySelectorAll.

Låt oss titta på de karakteristiska dragen för detta fel. Låt oss säga att vi har följande stycken:

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

En programmerare bestämde sig för att hämta och skriva ut texterna från dessa stycken i konsolen. För att göra detta hämtade han referenser till dessa element till en variabel, men använde felaktigt fel metod:

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

Sedan bestämde han sig för att loopa igenom styckena med en loop och skriva ut texten för varje stycke i konsolen:

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

Som ett resultat visas ett karakteristiskt fel elems is not iterable i konsolen. Det säger att variabeln elems inte är itererbar, det vill säga inte är en array eller något som kan loopas över med en for-of-loop.