67 lines
4.9 KiB
Markdown
67 lines
4.9 KiB
Markdown
---
|
||
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_** |