Грешка при получаване на елемент в JavaScript

Понякога начинаещите програмисти правят грешка, като използват за получаване на един DOM елемент метода querySelectorAll вместо метода querySelector.

Нека да разгледаме характерните особености на тази грешка. Нека имаме параграф:

<p>text</p>

Някой програмист решил да получи и промени текста на този параграф. За целта той получил препратка към този елемент в променлива, като погрешно използвал неподходящия метод:

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

След това програмистът се опитал да промени текста на параграфа. Обаче, текстът на параграфа не се променил:

elem.textContent = '!!!'; // не проработи

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

Как да открием грешката

Нека да видим как програмистът трябва да действа, за да открие тази грешка. Всъщност, имайки известен опит, тя лесно се открива по характерните признаци.

Но да приемем, че това не се е случило. Тогава първото действие на програмиста при търсене на грешки трябва да е извеждане на стойностите на променливите в конзолата. В неговия случай има само една променлива - elem. Трябва да изведем стойността на тази променлива и да погледнем какво съдържа тя:

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

В конзолата веднага се вижда, че в променливата няма един елемент, а масив. Това веднага дава очевидна подсказка, че е допусната грешка в метода за получаване на елемента.