Объектная модель документа (DOM, Document Object Model) является важной частью интерактивного веб-сайта. Это интерфейс, который позволяет языку программирования управлять контентом, структурой и стилем веб-сайта. JavaScript – это клиентский скриптовый язык, который подключается к DOM в интернет-браузере.
Почти любое действие, выполняемое веб-сайтом, – например, показ слайд-шоу, отображение ошибок при отправке неправильно заполненной формы или переключение меню навигации, – является результатом взаимодействия JavaScript и DOM. В этом мануале вы узнаете, что такое DOM, как работать с объектом document и какая разница между исходным кодом HTML и DOM.
Примечание: DOM не зависит от языка (создается независимо от определенного языка программирования), но в этом мануале мы рассмотрим реализацию HTML DOM в JavaScript.
Требования
- Базовые навыки работы с HTML и CSS.
- Понимание структуры кода и синтаксиса 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:
- DOM изменен клиентским JavaScript.
- Браузер автоматически исправляет ошибки в исходном коде.
Чтобы понять, как 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.