Узел DOM

Когда браузер разбирает HTML, он строит дерево объектов. Каждый тег становится элементом, текст между тегами — текстовым узлом, комментарий — узлом-комментарием, а корнем дерева служит узел документа. Все они реализуют общий интерфейс Node со свойствами parentNode, childNodes, nextSibling и методами вставки и удаления. Элемент — лишь самый заметный вид узла, поэтому понятие узла шире понятия HTML-элемента.

Атрибуты в спецификации тоже описаны как узлы типа Attr, но в дерево они не входят: у атрибута нет родителя, и в childNodes элемента его не найти. Работают с ними через методы элемента — getAttribute() и setAttribute().

Основные типы узлов

• 1 — ELEMENT_NODE, элемент: <div>, <p>.
• 3 — TEXT_NODE, текст, включая пробелы и переводы строк между тегами.
• 8 — COMMENT_NODE, HTML-комментарий.
• 9 — DOCUMENT_NODE, сам document.
• 11 — DOCUMENT_FRAGMENT_NODE, фрагмент — контейнер для подготовки узлов вне страницы.

Пример: узлы и элементы

<ul id="menu">
  <li>Главная</li>
  <li>Услуги</li>
</ul>

const ul = document.getElementById('menu');
ul.childNodes.length;  // 5: три пробельных текста и два li
ul.children.length;    // 2: только элементы
ul.firstChild.nodeType;         // 3 — текстовый узел
ul.firstElementChild.nodeName;  // "LI"

Переводы строк и отступы в разметке попадают в дерево как текстовые узлы. Из-за этого firstChild часто возвращает не первый <li>, а пробельный текст. Если нужны только теги, используют «элементные» варианты: children, firstElementChild, nextElementSibling.

На чём спотыкаются в коде

• Считать NodeList массивом. У childNodes есть forEach, но нет map и filter; при необходимости список превращают в массив через Array.from().
• Забыть, что список «живой». childNodes обновляется сам при изменении дерева, а результат querySelectorAll() — статичный снимок. Удаляя узлы в цикле по живому списку, легко пропустить половину.
• Вставлять сотни узлов по одному. Быстрее собрать их в DocumentFragment и добавить на страницу одним действием.

Отдельное поддерево со своими узлами, скрытое от основного документа, создаёт Shadow DOM — на нём строятся веб-компоненты.