DOM

DOM (Document Object Model, объектная модель документа) - это программный интерфейс для HTML и XML-документов, который представляет страницу в виде дерева объектов. DOM позволяет программам и скриптам (в частности, JavaScript) динамически получать доступ к содержимому документа, изменять его структуру, стиль и содержимое.

DOM не является частью языка HTML или JavaScript, а представляет собой независимый стандарт, разработанный консорциумом W3C. Он определяет, как браузер должен представлять документ в памяти и каким образом с ним можно взаимодействовать программно.

Представление документа в виде дерева

Когда браузер загружает HTML-страницу, он создаёт DOM-дерево, где каждый HTML-элемент, атрибут и текстовый фрагмент становится узлом дерева. Корнем дерева является объект document, от которого отходят все остальные узлы.

Для наглядности - простой HTML-код:

<!DOCTYPE html>
<html>
<head>
    <title>Заголовок страницы</title>
</head>
<body>
    <h1>Основной заголовок</h1>
    <p>Это абзац текста.</p>
</body>
</html>

DOM-дерево для этого документа будет выглядеть так:

• document

   * html
       * head
           * title
               * "Заголовок страницы"
       * body
           * h1
               * "Основной заголовок"
           * p
               * "Это абзац текста."

Типы узлов

В DOM существует несколько типов узлов:

• Узел-элемент (element node) - соответствует HTML-тегу (например, <body>, <p>, <h1>).
• Узел-атрибут (attribute node) - соответствует атрибуту тега (например, class="example").
• Текстовый узел (text node) - содержит текст внутри элемента.
• Узел-комментарий (comment node) - содержит HTML-комментарии.
• Узел-документ (document node) - корневой узел, представляющий весь документ.

Доступ к элементам DOM

JavaScript предоставляет методы для поиска и доступа к элементам DOM:

• document.getElementById('id') - поиск элемента по уникальному идентификатору.
• document.getElementsByClassName('class') - поиск элементов по имени класса.
• document.getElementsByTagName('tag') - поиск элементов по имени тега.
• document.querySelector('селектор') - поиск первого элемента, соответствующего CSS-селектору.
• document.querySelectorAll('селектор') - поиск всех элементов, соответствующих CSS-селектору.

Пример:

let header = document.getElementById('main-header');
let paragraphs = document.getElementsByTagName('p');
let firstButton = document.querySelector('.btn');

Изменение DOM

JavaScript позволяет изменять найденные элементы:

• Изменять содержимое: element.innerHTML = "новый текст".
• Изменять атрибуты: element.setAttribute('class', 'new-class').
• Изменять стили: element.style.color = "red".
• Создавать новые элементы: document.createElement('div').
• Добавлять элементы в документ: parent.appendChild(newElement).
• Удалять элементы: element.remove() или parent.removeChild(element).

События DOM

DOM позволяет реагировать на действия пользователя с помощью событий:

• click - клик по элементу.
• mouseover - наведение курсора.
• mouseout - уход курсора.
• keydown - нажатие клавиши.
• submit - отправка формы.
• load - загрузка страницы.

Пример обработки события:

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Кнопка нажата!');
});

DOM и виртуальный DOM

В современных фреймворках (React, Vue, Angular) используется понятие виртуального DOM (Virtual DOM). Это легковесная копия реального DOM, хранящаяся в памяти. Фреймворк отслеживает изменения в виртуальном DOM и затем оптимальным способом обновляет реальный DOM, что значительно повышает производительность сложных приложений.

DOM и SEO

Поисковые роботы анализируют DOM-дерево страницы, чтобы понять её структуру и содержимое. Некорректно построенное DOM-дерево (например, из-за ошибок в JavaScript) может привести к тому, что поисковый робот не увидит часть контента, что негативно скажется на ранжировании. Особенно это актуально для одностраничных приложений (SPA), где контент генерируется динамически.

Связанные термины

• HTML
• JavaScript
• CSS
• Браузер
• События
• Виртуальный DOM