JavaScriptда элемент олишда хатолик

Бошлангич дастурчилар баъзан битта DOM элементни олиш учун querySelector ўрнига querySelectorAll усулидан фойдаланиб хатога йўл куядилар.

Келинг, бу хатолинг хос хусусиятларини кўриб чикайлик. Бир абзац берилган бўлсин:

<p>матн</p>

Бир дастурчи бу абзацнинг матнини олиш ва ўзгартиришга карор қилди. Бунинг учун у ушбу элементга ҳаволани ўзгарувчига олитди, нотугри усулдан фойдаланган ҳолда:

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

Сўнгра дастурчи абзац матнини ўзгартиришга ҳаракат қилди. Бирок, абзац матни ўзгармади:

elem.textContent = '!!!'; // ишламади

Бу билан бирга консольда биронта хам хатолик пайдо бўлмади. Гапи шундаки, жонли амал бажарилди, лекин битта элемент үстида эмас, балки группа устида. Группа элементларининг матнини шундай ўқиш ёки ўзгартириш мумкин эмас - факат уларни цикл билан айлантириб ва ҳар бир элементга алоҳида муроожат қилиш орқали.

Хатоликни қандай аниқлаш мумкин

Келинг, дастурчи бу хатоликни аниқлаш учун қандай ҳаракат қилиши кераклигини кўриб чикайлик. Аслида, бир mиқдор тажрибага эга бўлганда, унининг хос белгилари бойича осонгина аниқлаш мумкин.

Бирок, бу содир бўлмасин. Унда хатоликларни излашда дастурчининг биринчи ҳаракати ўзгарувчиларнинг қийматларини консольга чиқариш бўлиши керак. Унинг ҳолида факат битта ўзгарувчи бор - elem. Ушбу ўзгарувчининг қийматини чиқариб кўриш ва унда нима ётганини кўриш керак:

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

Консольда дароқ кўриниб турибдики, ўзгарувчида битта элемент эмас, балки массив бор. Бу элемент олиш усулида хатолик qўйилганлиги ҳақида дароқ маълумот беради.