Рад са чворовима у JavaScript-у
Као што знате, ознаке могу да садрже друге ознаке или, када говоримо у терминима JavaScript-а, DOM елементи могу да садрже друге DOM елементе. Поред тога, међутим, у њима могу бити коментари и обичан текст. Коментаре, текстове и DOM елементе обједињује један назив - чворови.
Већ су вам позната својства firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Ова својства раде управо са DOM елементима,
игноришући остале чворове. По правилу, управо
то нам и треба.
Међутим, постоје и својства firstChild,
lastChild, nextSibling, previousSibling.
Ова својства раде на сличан начин,
али, узимајући у обзир све чворове. Хајде да погледамо
разлику између ових својстава на примеру.
Претпоставимо да имамо div који садржи три чвора:
<div id="elem"><!--com-->text<span>tag</span></div>
Хајде да добијемо референцу на овај div у променљиву:
let elem = document.querySelector('#elem');
А сада хајде да погледамо шта се налази
у својствима firstChild и firstElementChild:
console.log(elem.firstChild); // коментар
console.log(elem.firstElementChild); // ознака span
Напишите код који ће показати разлику између
lastChild и lastElementChild.
Напишите код који ће показати разлику између
nextSibling и nextElementSibling.
Напишите код који ће показати разлику између
previousSibling и previousElementSibling.
