Что такое DOM?

Вот краткое определение DOM:

Объектная модель документа (DOM) — это представление данных об объектах, которые составляют структуру и содержание документа в Интернете, например, веб-сайта.

Говоря простым языком, DOM представляет структуру вашего сайта.

DOM важна по нескольким причинам. И React, и Vue используют виртуальную DOM для оптимизации приложений.

Кроме того, веб-компоненты иногда используют теневые DOM.

Логическое дерево DOM

Объектную модель документа можно представить в виде логического дерева.
Вы можете прочитать, откуда взялась DOM, или перейти к следующей части.

Представление дерева DOM, Википедия.

Более того, каждая ветвь дерева заканчивается узлом. Каждый узел может 

  • содержать объекты
  • иметь обработчики событий

Узлы, содержащие объекты

Другими словами, каждый узел может содержать HTML-элементы, к которым можно получить программный доступ. 

Интерфейсы обеспечивают программный доступ к дереву. С их помощью можно изменить структуру, стиль или содержание документа. Вот некоторые примеры:

  • Document: представляет саму веб-страницу и является точкой входа в дерево DOM, где находится все содержимое. Используя такие методы, как querySelector(), вы получаете первый узел Element в документе, который соответствует заданным селекторам. Существует множество других методов.
  • Element: общий класс, от которого происходят все объекты, представляющие элементы.
  • Window: представляет окно, содержащее документ DOM. Упомянутый выше интерфейс документа относится к документу внутри этого окна.

Узлы с обработчиками событий 

Более того, те же интерфейсы, представленные выше, имеют обработчики событий, которые могут вызывать манипуляции с объектной моделью документа.

  • Документ — событие Wheel. Событие колеса срабатывает, когда пользователь вращает колесо.
  • Элемент — Событие ошибки. Возникает, когда ресурс не загрузился или не может быть использован.
  • Окно — Событие изменения размера. Возникает при изменении размера окна.

Все свойства, методы и события, доступные для манипулирования и создания веб-страниц, организованы в объекты. MDN.

Возможно, вы захотите открыть консоль разработчика и заглянуть во вкладку Network. Как обсуждалось в этом посте, когда вы обновляете страницу, первый файл, который вы получите, на самом деле является документом!

Что такое DOM в JavaScript?

Для ясности, объектная модель документа — это не JavaScript или Python, поскольку она была разработана для того, чтобы быть независимой от какого-либо конкретного языка программирования. 

Спрашивать «Что такое DOM в JavaScript?» бессмысленно.

Благодаря этому выбору, вы можете получить доступ к объектной модели документа с помощью Python, JavaScript и других языков по вашему желанию.

Такие языки, как JavaScript и Python, обычно пишутся в виде сценария, который может быть выполнен программой или браузером. 

Вот как может выглядеть сценарий JavaScript внутри HTML-документа:

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <h1>A nice title here</h1>
    <p id="test"></p>
    <script>
      document.getElementById("test").innerHTML = "Hello!";
    </script>
  </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

Вообще говоря, вы хотите, чтобы структура страницы (HTML) была отделена от манипуляций с DOM (JavaScript). 

По этой причине элемент script либо содержит операторы сценария, как в примере выше, либо указывает на внешний файл сценария через атрибут src.

Основные выводы

В заключение стоит упомянуть несколько моментов, которые необходимо запомнить:

  • DOM — это представление структуры и содержимого страницы.
  • Каждая ветвь логического дерева заканчивается узлом 
  • Каждый узел может содержать объекты или иметь обработчики событий
  • DOM не зависит от конкретного языка программирования.

Оцените статью
devanswers.ru
Добавить комментарий