Ошибка получения элементов в JavaScript

Иногда начинающие программисты совершают ошибку, используя для получения группы DOM элементов метод querySelector вместо метода querySelectorAll.

Давайте посмотрим на характерные особенности данной ошибки. Пусть даны абзацы:

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

Некий программист решил получить и вывести в консоль тексты этих абзацев. Для этого он получил ссылки на эти элементы в переменную, ошибочно использовав не тот метод:

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

Затем он решил перебрать абзацы циклом и вывести текст каждого абзаца в консоль:

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

В результате в консоли появится характерная ошибка elems is not iterable. Она говорит, что переменная elems не итерабельна, то есть не является массивом или чем-то, что можно перебрать через цикл for-of.