Práce s uzly v JavaScriptu

Jak víte, tagy mohou obsahovat jiné tagy nebo, řečeno v termínech JavaScriptu, DOM elementy mohou obsahovat jiné DOM elementy. Kromě toho však v nich mohou být komentáře a obyčejný text. Komentáře, texty a DOM elementy spojujeme jedním názvem - uzly.

Už vám jsou známé vlastnosti firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Tyto vlastnosti pracují právě s DOM elementy, ignorujíce ostatní uzly. Zpravidla je to právě to, co potřebujeme.

Avšak existují také vlastnosti firstChild, lastChild, nextSibling, previousSibling. Tyto vlastnosti pracují analogickým způsobem, avšak berouce v úvahu všechny uzly. Podívejme se na rozdíl mezi těmito vlastnostmi na příkladu. Mějme div, obsahující v sobě tři uzly:

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

Získejme odkaz na tento div do proměnné:

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

A nyní se podívejme, co je obsaženo ve vlastnostech firstChild a firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentář
console.log(elem.firstElementChild); // tag span