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