Памылка атрымання элемента ў JavaScript

Часам пачатковыя праграмісты робяць памылку, выкарыстоўваючы для атрымання аднаго DOM элемента метад querySelectorAll замест метаду querySelector.

Давайце паглядзім на характэрныя асаблівасці гэтай памылкі. Хай дадзены абзац:

<p>text</p>

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

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

Затым праграміст паспрабаваў змяніць тэкст абзаца. Аднак, тэкст абзаца не змяніўся:

elem.textContent = '!!!'; // не атрымалася

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

Як выявіць памылку

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

Хай гэтага, аднак, не адбылося. Тады першым дзеяннем праграміста пры пошуку памылак павінен быць вывад значэнняў зменных у кансоль. У яго выпадку ёсць толькі адна зменная - elem. Трэба вывесці значэнне гэтай зменнай і паглядзець, што ў ёй ляжыць:

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

У кансолі адразу відаць, што ў зменнай не адзін элемент, а масіў. Гэта адразу дае відавочную падказку аб тым, што дапушчана памылка ў метаде для атрымання элемента.