← Назад ко всем вопросам

Что такое DOM

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Зачем нужен DOM

DOM необходим для того, чтобы разработчики могли динамически изменять веб-страницы без необходимости их перезагрузки. Это позволяет создавать интерактивные и динамичные пользовательские интерфейсы. Например, с помощью DOM можно добавлять новые элементы на страницу, изменять текст, стили, реагировать на действия пользователя и многое другое.

Как работает DOM

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

Пример работы с DOM

Рассмотрим простой пример, где мы изменим текст элемента на веб-странице с помощью JavaScript.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>
​
    <script>
        function changeText() {
            // Получаем элемент с id "title"
            var titleElement = document.getElementById('title');
            // Изменяем текстовое содержимое элемента
            titleElement.textContent = 'Hello, DOM!';
        }
    </script>
</body>
</html>

Объяснение кода:

  • <!DOCTYPE html>: Определяет тип документа и версию HTML.
  • <html lang="en">: Начало HTML-документа с указанием языка.
  • <head>: Содержит метаданные документа, такие как кодировка и заголовок.
  • <body>: Основное содержимое документа.
  • <h1 id="title">Hello, World!</h1>: Заголовок с уникальным идентификатором id="title".
  • <button onclick="changeText()">Change Text</button>: Кнопка, которая вызывает функцию changeText() при нажатии.
  • <script>: Содержит JavaScript-код.
  • function changeText(): Определяет функцию, которая изменяет текст заголовка.
  • document.getElementById('title'): Метод DOM, который возвращает элемент с указанным id.
  • titleElement.textContent = 'Hello, DOM!';: Изменяет текстовое содержимое элемента.

Этот пример демонстрирует, как с помощью DOM можно взаимодействовать с элементами HTML, изменяя их содержимое в ответ на действия пользователя. DOM является основой для создания интерактивных веб-приложений и позволяет разработчикам эффективно управлять содержимым и структурой веб-страниц.

Тема: Браузер: DOM, события и модель
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки