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

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

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

<p>text</p>

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

let elem = document.querySelectorAll('p');

Затем программист попытался изменить текст абзаца. Однако, текст абзаца не поменялся:

elem.textContent = '!!!'; // не сработало

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

Как обнаружить ошибку

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

Пусть этого, однако, не произошло. Toгда первым действием программиста при поиске ошибок должен быть вывод значений переменных в консоль. В его случае есть только одна переменная - elem. Нужно вывести значение этой переменной и посмотреть, что в ней лежит:

let elem = document.querySelectorAll('p');
console.log(elem); // выведет массив, а не один элемент

В консоли сразу видно, что в переменной не один элемент, а массив. Это сразу дает очевидную подсказку о том, что допущена ошибка в методе для получения элемента.