update git

docs/browser/02-dom.md

@@ -2,4 +2,65 @@
 sidebar_position: 2
 ---
 
-# DOM
+# DOM
+Источник: DeepSeek
+
+DOM (Document Object Model) — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы.
+
+**Преимущества DOM:**
+- Универсальность: работает с любыми HTML/XML документами.
+- Гибкость: позволяет динамически изменять страницу.
+- Поддержка всеми современными браузерами.
+
+**Недостатки DOM:**
+- Медленная работа с большими документами (из-за сложности дерева).
+- Высокое потребление памяти для сложных страниц.
+
+## Основные понятия DOM:
+1. **Дерево узлов (Node Tree):**
+   - DOM представляет документ в виде иерархического дерева узлов.
+   - Каждый HTML-элемент, атрибут, текст и даже комментарий — это узел (Node) в этом дереве.
+2. **Типы узлов:**
+   - **Элемент (Element):** HTML-теги (например, `<div>`, `<p>`, `<a>`).
+   - **Атрибут (Attribute):** Атрибуты элементов (например, `class`, `id`, `href`).
+   - **Текст (Text):** Текстовое содержимое внутри элементов.
+   - **Комментарий (Comment):** Комментарии в HTML-коде.
+   - **Документ (Document):** Корневой узел, представляющий весь документ.
+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')` — установка атрибута.