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:
<div id="elem"><!--com-->text<span>tag</span></div>
Získame odkaz na tento div do premennej:
let elem = document.querySelector('#elem');
A teraz sa pozrime, čo je obsiahnuté
vo vlastnostiach firstChild a firstElementChild:
console.log(elem.firstChild); // komentár
console.log(elem.firstElementChild); // značka span
Napíšte kód, ktorý ukáže rozdiel medzi
lastChild a lastElementChild.
Napíšte kód, ktorý ukáže rozdiel medzi
nextSibling a nextElementSibling.
Napíšte kód, ktorý ukáže rozdiel medzi
previousSibling a previousElementSibling.
