Работа с узлами в JavaScript

Как вы знаете, теги могут содержать другие теги или, говоря в терминах JavaScript, DOM элементы могут содержать другие DOM элементы. Кроме этого, однако, в них могут быть комментарии и обычный текст. Комментарии, тексты и DOM элементы объединяют одним названием - узлы.

Вам уже знакомы свойства firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. Эти свойства работают именно с DOM элементами, игнорируя остальные узлы. Как правило, именно это нам и требуется.

Однако, существуют также свойства firstChild, lastChild, nextSibling, previousSibling. Эти свойства работают аналогичным образом, однако, учитывая все узлы. Давайте посмотрим разницу между этими свойствами на примере. Пусть у нас есть див, содержащий в себе три узла:

html<div id="elem"><!--com-->text<span>tag</span></div>

Получим ссылку на этот див в переменную:

javascriptlet elem = document.querySelector('#elem');

А теперь давайте посмотрим, что содержится в свойствах firstChild и firstElementChild:

javascriptconsole.log(elem.firstChild);        // комментарий
console.log(elem.firstElementChild); // тег span