Práca s uzlami v JavaScript

Ako viete, značky môžu obsahovať iné značky alebo, povedané v terminológii JavaScriptu, DOM elementy môžu obsahovať iné DOM elementy. Okrem toho však v nich môžu byť komentáre a obyčajný text. Komentáre, texty a DOM elementy spája jedno pomenovanie - uzly.

Už sú vám známe vlastnosti firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Tieto vlastnosti pracujú práve s DOM elementami, ignorujúc ostatné uzly. Spravidla práve to je to, čo potrebujeme.

Avšak, existujú aj vlastnosti firstChild, lastChild, nextSibling, previousSibling. Tieto vlastnosti pracujú analogickým spôsobom, avšak, berúc do úvahy všetky uzly. Pozrime sa na rozdiel medzi týmito vlastnosťami na príklade. Nech máme div, ktorý obsahuje v sebe tri uzly:

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

Získame odkaz na tento div do premennej:

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

A teraz sa pozrime, čo je obsiahnuté vo vlastnostiach firstChild a firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentár
console.log(elem.firstElementChild); // značka span