HTML-элемент как узел документа¶

HTML-элемент как узел документа — это представление элемента разметки в объектной модели документа (DOM), где каждый тег, его атрибуты и содержимое преобразуются в отдельные узлы дерева. При загрузке HTML-страницы браузер разбирает разметку и строит иерархическую структуру, в которой элементу соответствует узел типа Element, а его текст и атрибуты — узлы других типов. Такое представление позволяет программам на JavaScript и другим языкам обращаться к содержимому страницы как к структуре данных.

¶Место в объектной модели документа

DOM (Document Object Model) — платформенно-независимый интерфейс, представляющий HTML- или XML-документ в виде дерева. Каждый элемент разметки становится узлом этого дерева. Узел — базовая абстракция: всё в документе (теги, текст, комментарии) является узлом с общим набором свойств и методов.

Ключевое свойство узла — nodeType, числовой код, определяющий его разновидность. Основные типы приведены в таблице.

Таким образом, HTML-элемент — лишь один из видов узлов, хотя и наиболее важный для работы с разметкой.

¶Иерархия и связи

Узлы связаны отношениями, повторяющими вложенность тегов:

• Родительский узел (parentNode) — элемент, внутри которого находится данный узел.
• Дочерние узлы (childNodes) — коллекция вложенных узлов, включая текстовые.
• Соседние узлы (nextSibling, previousSibling) — узлы на том же уровне.

Важно различать дочерние узлы и дочерние элементы: коллекция children содержит только узлы-элементы, тогда как childNodes включает также текст и комментарии. Например, пробелы и переводы строк между тегами образуют текстовые узлы.

¶Свойства и методы

Узел-элемент предоставляет доступ к своему имени, атрибутам и содержимому:

• tagName / nodeName — имя тега в верхнем регистре.
• attributes — набор атрибутов элемента.
• innerHTML и textContent — разметка и текст внутри узла.
• classList, id, className — доступ к атрибутам идентификации.

Методы позволяют изменять дерево: appendChild, removeChild, insertBefore, replaceChild. Поиск узлов выполняется через getElementById, querySelector, getElementsByClassName и аналоги.

¶Различие Element и Node

Хотя каждый HTML-элемент является узлом, обратное неверно. Интерфейс Node — общий для всех типов, а Element — его расширение, добавляющее методы работы с атрибутами и геометрией (getBoundingClientRect, setAttribute). Поэтому методы вроде querySelector доступны только на узлах-элементах и на документе, но не на текстовых узлах.

¶Практическое значение

Представление элемента как узла лежит в основе динамического изменения страниц: скрипты добавляют, удаляют и перемещают узлы, что немедленно отражается на отображении. Событийная модель также опирается на дерево узлов — события всплывают от целевого узла к корню. Понимание узловой структуры необходимо при работе с DOM, отладке разметки и построении одностраничных приложений.