Дар JavaScript гирифтани элемент хатоги

Гаҳе барномасозони оғозӣ хатогӣ мекунанд, барои гирифтани як элементи DOM методи querySelectorAll-ро ба ҷои методи querySelector истифода мебаранд.

Биёед ба хусусиятҳои ин хатогӣ назар андозем. Фарз кунем, ки як абзац дода шудааст:

<p>матн</p>

Як барномасоз қарор дод, ки матни ин абзацро гирад ва тағир диҳад. Барои ин, ӯ ишорат ба ин элементро дар тағирёбанда гирифт, бо хатогӣ истифода бурда аз он методи дигар:

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

Сипас барномасоз кӯшиш кард, ки матни абзацро тағир диҳад. Аммо, матни абзас тағир наёфт:

elem.textContent = '!!!'; // кор накард

Дар ин ҳол, ягон хатогӣ дар консол пайдо нашуд. Масъала ин аст, ки амали иҷозатдодашуда иҷро шуд, аммо на бар як элемент, балки бар як гурӯҳ. Ва хондан ё тағир додани матни гурӯҳи элементҳо ба таври оддӣ мумкин нест - танҳо бо такрори онҳо дар ҳалқа ва муроҷиат ба ҳар як элемент ба таври алоҳида.

Чӣ тавр хатогӣро кашф кардан

Биёед бубинем, ки барномасоз бояд чӣ гуна амал кунад, то ин хатогиро кашф кунад. Аслан, доштани баъзе таҷриба, кашф кардани он осон аст бо аломатҳои муайян.

Фарз кунем, ки ин, ҳамчунон, рӯй надод. Он вақт аввалин амали барномасоз дар ҷустуҷӯи хатогиҳо бояд баровардани арзишҳои тағирёбандаҳо дар консол бошад. Дар ҳолати ӯ танҳо як тағирёбанда мавҷуд аст - elem. Арзиши ин тағирёбандаро бояд баровард ва дид, ки дар он чӣ ҷой гирифтааст:

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

Дар консол фавран дида мешавад, ки дар тағирёбанда як элемент нест, балки массив аст. Ин фавран ишораи равшане медиҳад, ки хатогӣ дар усули гирифтани элемент рух додааст.