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

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

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

<p>text</p>

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

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

Затим је програмер покушао да измени текст пасуса. Међутим, текст пасуса се није променио:

elem.textContent = '!!!'; // није успјело

При томе ниједна грешка у конзоли се није појавила. Ствар је у томе да је извршена допустива операција, али не над једним елементом, већ над групом. А прочитати или изменити текст групе елемената једноставно тако не може - само прелиставши их петљом и приступивши сваком елементу појединачно.

Како открити грешку

Хајде да видимо како програмер треба да поступи да би открио ову грешку. У ствари, поседујући одређено искусство, лако се може открити по карактеристичним знацима.

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

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

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