DOM (Объектная Модель Документа)

Объектная Модель Документа (DOM) – это интерфейс программирования, который представляет структуру документа HTML или XML в виде дерева объектов. Он позволяет скриптам и программам динамически получать доступ, изменять и манипулировать элементами, атрибутами и содержимым на веб-странице. DOM служит связующим звеном между веб-документами и языками программирования, такими как JavaScript, что позволяет создавать интерактивные и динамичные веб-опыты.

Также известен как: Дерево DOM, Модель документа

Сравнения

DOM против HTML: HTML — это статическая разметка веб-страницы, в то время как DOM представляет структурированную и интерактивную версию документа.

DOM против Виртуального DOM: Виртуальный DOM (используется в таких фреймворках, как React) — это легковесная копия реального DOM, оптимизирующая обновления и производительность.

Плюсы

• Позволяет динамически обновлять содержимое без перезагрузки страницы.

• Обеспечивает структурированный доступ к элементам для написания скриптов и автоматизации.

• Поддерживается во всех современных браузерах и веб-технологиях.

Минусы

• Прямое манипулирование DOM может быть медленным и неэффективным для больших документов.

• Частые обновления DOM могут вызывать узкие места производительности.

• Сложные структуры DOM могут привести к затруднениям в отладке и обслуживании.

Пример

Разработчик хочет изменить текст кнопки при ее нажатии. Используя JavaScript и DOM, они могут сделать это динамически:

document.getElementById("myButton").addEventListener("click", function() {
    this.textContent = "Нажата!";
});

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