Rad sa čvorovima u JavaScript-u

Kao što znate, tagovi mogu sadržati druge tagove ili, govoreći u terminima JavaScript-a, DOM elementi mogu sadržati druge DOM elemente. Pored toga, međutim, u njima mogu biti komentari i običan tekst. Komentare, tekstove i DOM elemente objedinjuje jedan naziv - čvorovi.

Već su vam poznata svojstva firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Ova svojstva rade upravo sa DOM elementima, ignorišući ostale čvorove. U pravilu, upravo to nam je i potrebno.

Međutim, postoje i svojstva firstChild, lastChild, nextSibling, previousSibling. Ova svojstva rade na sličan način, međutim, uzimajući u obzir sve čvorove. Hajde da pogledamo razliku između ovih svojstava na primeru. Neka imamo div koji u sebi sadrži tri čvora:

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

Preuzmimo referencu na ovaj div u promenljivu:

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

A sada hajde da pogledamo šta se nalazi u svojstvima firstChild i firstElementChild:

javascriptconsole.log(elem.firstChild);        // komentar
console.log(elem.firstElementChild); // tag span