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

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

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

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

`<div id="elem"><!--сomm-->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`.

←→
↑
en ru