The Error of Getting Elements in JavaScript

Sometimes beginner programmers make a mistake by using the querySelector method to get a group of DOM elements instead of the querySelectorAll method.

Let's look at the characteristic features of this error. Let there be given paragraphs:

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

A certain programmer decided to get and output the texts of these paragraphs to the console. To do this, he got references to these elements into a variable, mistakenly using the wrong method:

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

Then he decided to iterate over the paragraphs with a loop and output the text of each paragraph to the console:

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

As a result, a characteristic error elems is not iterable will appear in the console. It says that the variable elems is not iterable, meaning it is not an array or something that can be iterated over via a for-of loop.