JavaScript-те элемент алу қатесі

Кейде бағдарламалауды жаңа бастағандар бір DOM элементін алу үшін querySelector әдісінің орнына querySelectorAll әдісін қолдану сияқты қателік жібереді.

Осы қатенің тән сипаттамаларын қарастырайық. Бір абзац берілген делік:

<p>мәтін</p>

Бір программист осы абзацтың мәтінін алуды және өзгертуді шешті. Ол бұл үшін осы элементке сілтемені айнымалыға жіберді, бірақ қателікпен басқа әдісті қолданды:

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

Содан кейін программист абзацтың мәтінін өзгертуге тырысты. Алайда, абзацтың мәтіні өзгерген жоқ:

elem.textContent = '!!!'; // орындалмады

Бұл ретте консольде ешқандай қате пайда болған жоқ. Себебі, рұқсат етілген операция орындалды, бірақ ол бір элементке емес, топқа қатысты. Ал топ элементтерінің мәтінін оқуға немесе өзгертуге жай ғана болмайды - тек оларды циклмен айналып, әр элементке бөлек жүгінуге болады.

Қатені қалай анықтауға болады

Программисттің осы қатені анықтау үшін қалай әрекет етуі керек екенін қарастырайық. Шын мәнінде, белгілі бір тәжірибеге ие болғанда, оны тән белгілер бойынша оңай анықтауға болады.

Алайда, бұл орын алмасын делік. Онда қателерді іздеу кезінде программисттің бірінші әрекеті айнымалы мәндерін консольге шығару болуы керек. Оның жағдайында тек бір айнымалы бар - elem. Осы айнымалының мәнін шығарып, онда не бар екенін қарау керек:

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

Консольде айнымалыда бір элемент емес, массив бар екені бірден көрінеді. Бұл элементті алу әдісінде қателік жіберілгені туралы анық көрсеткіш береді.