Работа с узлами в 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.
