Delo z vozlišči v JavaScript
Kot veste, lahko oznake vsebujejo druge oznake ali, z drugimi besedami v terminologiji JavaScript, DOM elementi lahko vsebujejo druge DOM elemente. Poleg tega pa lahko vsebujejo tudi komentarje in navadno besedilo. Komentarje, besedila in DOM elemente združujemo pod enim imenom - vozlišča.
Že poznate lastnosti firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Te lastnosti delujejo ravno z DOM elementi,
pri čemer ignorirajo preostala vozlišča. Praviloma je ravno
to tisto, kar potrebujemo.
Vendar pa obstajajo tudi lastnosti firstChild,
lastChild, nextSibling, previousSibling.
Te lastnosti delujejo na podoben način,
vendar upoštevajo vsa vozlišča. Poglejmo si
razliko med temi lastnostmi na primeru.
Predpostavimo, da imamo div, ki vsebuje tri vozlišča:
<div id="elem"><!--com-->text<span>tag</span></div>
Pridobimo povezavo do tega div-a v spremenljivko:
let elem = document.querySelector('#elem');
In sedaj poglejmo, kaj vsebujejo
lastnosti firstChild in firstElementChild:
console.log(elem.firstChild); // komentar
console.log(elem.firstElementChild); // oznaka span
Napišite kodo, ki bo pokazala razliko med
lastChild in lastElementChild.
Napišite kodo, ki bo pokazala razliko med
nextSibling in nextElementSibling.
Napišite kodo, ki bo pokazala razliko med
previousSibling in previousElementSibling.
