JavaScriptда узлар билан ишлаш

Сиз билланосиз, теглар бошқа тегларни ёки JavaScript терминологиясида айтганда, DOM элементлар бошқа DOM элементларни ўз ичига олиши мумкин. Бундан ташқари, уларда изоҳлар ва оддий матнлар бўлиши мумкин. Изоҳлар, матнлар ва DOM элементлар битта ном билан бирлашади - узлар.

Сизга firstElementChild, lastElementChild, nextElementSibling, previousElementSibling хоссалари таниш. Ушбу хоссалар айнан DOM элементлар билан ишлайди, қолган узларни эътиборга олмайди. Одатда, айнан шундай иш қилишимиз керак.

Аммо, firstChild, lastChild, nextSibling, previousSibling хоссалари ҳам мавжуд. Ушбу хоссалар ўхшаш тарзда ишлайди, лекин, барча узларни ҳисобга олади. Келинг, ушбу хоссаларнинг фарқини мисолда кўрамиз. Aйтайлик, бизда учта уздан иборат див бор:

html<div id="elem"><!--com-->text<span>tag</span></div>

Ушбу дивга ҳаволани ўзгарувчига оламиз:

javascriptlet elem = document.querySelector('#elem');

Энди firstChild ва firstElementChild хоссаларида нима сақланганлигини кўрамиз:

javascriptconsole.log(elem.firstChild);        // изоҳ
console.log(elem.firstElementChild); // span теги