---
sidebar_position: 2
---

# DOM

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

**Преимущества DOM:**
- Универсальность: работает с любыми HTML/XML документами.
- Гибкость: позволяет динамически изменять страницу.
- Поддержка всеми современными браузерами.

**Недостатки DOM:**
- Медленная работа с большими документами (из-за сложности дерева).
- Высокое потребление памяти для сложных страниц.

## Основные понятия DOM:
1. **Дерево узлов (Node Tree):**
   - DOM представляет документ в виде иерархического дерева узлов.
   - Каждый HTML-элемент, атрибут, текст и даже комментарий — это узел (Node) в этом дереве.
2. **Типы узлов:**
   - **Документ (Document):** Корневой узел, представляющий весь документ.
   - **Элемент (Element):** HTML-теги (например, `<div>`, `<p>`, `<a>`).
   - **Атрибут (Attribute):** Атрибуты элементов (например, `class`, `id`, `href`).
   - **Текст (Text):** Текстовое содержимое внутри элементов.
   - **Комментарий (Comment):** Комментарии в HTML-коде.
3. **DOM-элементы:**
   - Каждый HTML-элемент представлен как объект со свойствами и методами.
   - Например, у элемента `<div>` есть свойства `className`, `id`, `innerHTML` и методы `appendChild()`, `remove()`.

## Как создается DOM:
1. Браузер загружает HTML-документ.
2. Парсер HTML разбирает код и создает дерево DOM.
3. Каждый элемент, атрибут и текст становятся узлами в этом дереве.
4. DOM становится доступным для JavaScript и других скриптов.

## Зачем нужен DOM?
1. **Динамическое изменение страницы:**
   - JavaScript может использовать DOM для добавления, удаления или изменения элементов на странице.
   - Пример: изменение текста, добавление новых элементов, изменение стилей.
2. **Взаимодействие с пользователем:**
   - DOM позволяет реагировать на действия пользователя (клики, ввод текста и т.д.). 
   - Пример: обработка событий (click, mouseover, keydown).
3. **Доступ к данным:**
   - DOM предоставляет методы для поиска и извлечения данных из документа.
   - Пример: поиск элементов по классу, тегу или идентификатору.

## Основные методы работы с DOM:
1. Поиск элементов:
   - `document.getElementById('id')` — поиск по идентификатору.
   - `document.querySelector('.class')` — поиск по CSS-селектору.
   - `document.getElementsByTagName('div')` — поиск по тегу.
2. Изменение содержимого:
   - `element.innerHTML = 'Новый текст'` — изменение HTML-содержимого.
   - `element.textContent = 'Текст'` — изменение текстового содержимого.
3. Изменение стилей:
   - `element.style.color = 'red'` — изменение стиля элемента.
4. Добавление и удаление элементов:
   - `document.createElement('div')` — создание нового элемента.
   - `parentElement.appendChild(newElement)` — добавление элемента в DOM.
   - `element.remove()` — удаление элемента.
5. Работа с атрибутами:
   - `element.getAttribute('href')` — получение значения атрибута.
   - `element.setAttribute('class', 'new-class')` — установка атрибута.

🚀 **_Источник: DeepSeek_**