JavaScriptда узлар билан ишлаш
Сиз билланосиз, теглар бошқа тегларни ёки JavaScript терминологиясида айтганда, DOM элементлар бошқа DOM элементларни ўз ичига олиши мумкин. Бундан ташқари, уларда изоҳлар ва оддий матнлар бўлиши мумкин. Изоҳлар, матнлар ва DOM элементлар битта ном билан бирлашади - узлар.
Сизга firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling
хоссалари таниш.
Ушбу хоссалар айнан DOM элементлар билан ишлайди,
қолган узларни эътиборга олмайди. Одатда, айнан
шундай иш қилишимиз керак.
Аммо, firstChild,
lastChild, nextSibling, previousSibling
хоссалари ҳам мавжуд.
Ушбу хоссалар ўхшаш тарзда ишлайди,
лекин, барча узларни ҳисобга олади.
Келинг, ушбу хоссаларнинг фарқини мисолда кўрамиз.
Aйтайлик, бизда учта уздан иборат див бор:
<div id="elem"><!--com-->text<span>tag</span></div>
Ушбу дивга ҳаволани ўзгарувчига оламиз:
let elem = document.querySelector('#elem');
Энди firstChild ва firstElementChild
хоссаларида нима сақланганлигини кўрамиз:
console.log(elem.firstChild); // изоҳ
console.log(elem.firstElementChild); // span теги
lastChild ва lastElementChild
ўртасидаги фарқни кўрсатадиган код ёзинг.
nextSibling ва nextElementSibling
ўртасидаги фарқни кўрсатадиган код ёзинг.
previousSibling ва previousElementSibling
ўртасидаги фарқни кўрсатадиган код ёзинг.
