Основы DOM

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

Почти любое действие, выполняемое веб-сайтом, – например, показ слайд-шоу, отображение ошибок при отправке неправильно заполненной формы или переключение меню навигации, – является результатом взаимодействия JavaScript и DOM. В этом мануале вы узнаете, что такое DOM, как работать с объектом document и какая разница между исходным кодом HTML и DOM.

Примечание: DOM не зависит от языка (создается независимо от определенного языка программирования), но в этом мануале мы рассмотрим реализацию HTML DOM в JavaScript.

Требования

Что такое DOM?

На самом базовом уровне веб-сайт состоит из HTML-документа. Браузер, который вы используете для просмотра веб-сайта, — это, по сути, программа, которая интерпретирует HTML и CSS и отображает страницу (а именно стиль, контент и структуру).

Кроме анализа стиля и структуры HTML и CSS браузер создает представление документа, что и называется объектной моделью документа. Эта модель позволяет JavaScript иметь доступ к текстовому контенту и элементам документа веб-сайта как к объектам.

JavaScript – это интерактивный язык, потому его механизмы проще объяснить на примерах. Попробуйте создать очень простой веб-сайт. Создайте файл index.html и сохраните его в новом каталоге проекта. В файл вставьте:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>

Этот код – обычный  исходный код HTML нового скелета веб-сайта. Он содержит наиболее существенные аспекты документа веб-сайта – doctype и тег html с вложенными тегами head и body.

В этом мануале используется браузер Chrome, но вы можете получить подобный вывод и в другом современном браузере. откройте в Chrome файл index.html. Вы увидите простой веб-сайт с заголовком Document Object Model. Щелкните правой кнопкой мыши в любом месте страницы и выберите Inspect. Это откроет инструменты для разработчиков.

Во вкладке Elements вы увидите DOM.

В этом случае при расширении модель выглядит точно так же, как написанный ранее HTML-код – doctype и несколько других тегов HTML. При наведении курсора на какой-либо элемент будет выделен соответствующий элемент веб-сайта. Маленькие стрелки слева от элементов HTML позволяют вам переключать представление вложенных элементов.

Объект document

Объект document – это встроенный объект, который имеет множество свойств и методов, которые можно использовать для получения доступа и изменения веб-сайтов. Чтобы понять, как работать с DOM, вы должны понимать, как работают объекты в JavaScript.

Читайте также: Объекты в JavaScript

В инструментах разработчика на странице index.html перейдите во вкладку Console. Введите в консоль document и нажмите Enter. Вы увидите, что выведенный результат совпадает с тем, что вы видели во вкладке Elements.

document;
#document
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>

Вне отладки вы вряд ли будете вводить document и работать с ним непосредственно в консоли, но это помогает понять, как выглядит объект document и как его можно изменить.

В чем разница между исходным кодом DOM и HTML?

На данном этапе (судя по приведенному выше примеру) может показаться, что исходный код HTML и DOM – это одно и то же самое. Есть две ситуации, в которых DOM, созданный браузером, будет отличаться от исходного кода HTML:

  1. DOM изменен клиентским JavaScript.
  2. Браузер автоматически исправляет ошибки в исходном коде.

Чтобы понять, как DOM может быть изменен клиентским JavaScript, введите в консоль следующее:

document.body;
<body>
<h1>Document Object Model</h1>
</body>

document – это объект, body – свойство этого объекта, к которому вы обращались с помощью точечной нотации. Отправив document.body в консоль, вы получите элемент body и весь код внутри него.

В консоли можно изменить некоторые свойства объекта body на этом веб-сайте. Попробуйте отредактировать атрибут style, изменив цвет фона на fuchsia. Введите в консоль следующее:

document.body.style.backgroundColor = 'fuchsia';

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

Перейдя во вкладку Elements или снова введя document.body в консоль, вы увидите, что DOM изменился.

<body style="background-color: fuchsia;">
<h1>Document Object Model</h1>
</body>

Примечание: Чтобы изменить свойство CSS background-color, нужно ввести backgroundColor в JavaScript. Любое свойство CSS, написанное черездефис, записывается в JavaScript в верблюжьем регистре.

Код JavaScript, присваивая фону цвет fuchsia, теперь становится частью DOM.

Теперь кликните правой кнопкой мыши по странице и выберите View Page Source. Вы заметите, что исходный код веб-сайта не содержит нового атрибута style, который вы добавили с помощью JavaScript. Исходный код веб-сайта не изменится и никогда не будет затронут клиентским JavaScript. Если вы обновите страницу, новый код, который вы добавили в консоли, исчезнет.

Другая ситуация, в которой DOM может отличаться от исходного кода HTML, — это когда в исходном коде имеются ошибки. Одним из распространенных примеров такого поведения является тег table –внутри таблицы необходим тег tbody, но разработчики часто не могут включить его в свой HTML. Браузер автоматически исправит ошибку и добавит tbody, изменив DOM. DOM также установит теги, которые не были закрыты.

Заключение

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

Также вы знаете, чем код HTML может отличаться от DOM.

Более подробную информацию о DOM можно найти на странице Mozilla Developer Network.

В следующем мануале вы ознакомитесь с важными терминами HTML, узнаете о дереве DOM, узлах и их наиболее распространенных типах и начнете создавать интерактивные скрипты в JavaScript.

Tags: ,