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:
<div id="elem"><!--com-->text<span>tag</span></div>
Preuzmimo referencu na ovaj div u promenljivu:
let elem = document.querySelector('#elem');
A sada hajde da pogledamo šta se nalazi
u svojstvima firstChild i firstElementChild:
console.log(elem.firstChild); // komentar
console.log(elem.firstElementChild); // tag span
Napišite kod koji će pokazati razliku između
lastChild i lastElementChild.
Napišite kod koji će pokazati razliku između
nextSibling i nextElementSibling.
Napišite kod koji će pokazati razliku između
previousSibling i previousElementSibling.
