Грешка при добивање на елемент во JavaScript

Понекогаш почетните програмери прават грешка, користејќи го за добивање на еден DOM елемент методот querySelectorAll наместо методот querySelector.

Ајде да ги погледнеме карактеристичните особини на оваа грешка. Нека имаме параграф:

<p>text</p>

Некој програмер решил да го добие и промени текстот на овој параграф. За тоа, тој ја добил референцата за овој елемент во променлива, погрешно користејќи погрешен метод:

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

Потоа програмерот се обидел да го промени текстот на параграфот. Меѓутоа, текстот на параграфот не се промени:

elem.textContent = '!!!'; // не успеа

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

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

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

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

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

Во конзолата веднаш се гледа дека во променливата нема еден елемент, туку низа. Ова веднаш дава очигледна поука дека допуштена е грешка во методот за добивање на елемент.