Skip to main content

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