Каждый фронтенд-разработчик ежедневно работает с DOM. Кто-то работает с ним при помощи фреймворков, а кто-то манипулирует им напрямую. Поэтому любой начинающий фронтенд-разработчик должен понимать что такое DOM дерево и как с ним работать при поомщи JavaScript. В данной статье представлено описание и принцип работы DOM, а также приведены примеры HTML разметки и кода JavaScript для работы с DOM деревом.
DOM – это программный интерфейс доступа к HTML или XML документов на веб-странице. Представляет собой древовидную структуру страницы основанной на HTML и состоящую из узлов. По сути, DOM дерево является API, которое связывает веб-страницу, либо документ с языками программирования, например таким как JavaScript. Все объекты и методы, которые предоставляет браузер описаны в спецификации HTML DOM API, поддерживаемой W3C. С помощью них мы можем читать и изменять документ в памяти браузера. Например, с помощью JavaScript можно:
- добавлять, изменять и удалять любые HTML-элементы на странице, в том числе их атрибуты и стили;
- получать доступ к данным формы и управлять ими;
- реагировать на все существующие HTML-события на странице и создавать новые;
- рисовать графику на HTML-элементе и многое другое.
Из чего состоит DOM
Объектная модель документа строится на основе HTML разметки. HTML состоит из вложенных друг в друга тегов. Каждый HTML документ содержит корневой тег – html. Затем в этот тег вкладываются два дочерних тега head и body.
Тег head предназначен для хранения служебной информации о странице. Данный тег в обязательном порядке располагается первым внутри тега html, сразу перед body. Тег head содержит в себе заголовок, описание страницы, ключевые слова, кодировку языка в котором отображается веб-страница и информацию для отображения страницы на других сайтах, либо в соцсетях. Также помимо служебной информации в теге head подключаются CSS файлы для стилизации страницы, шрифты и некоторые JavaScript скрипты, которые должны подключаться в первую очередь. В head помещают путь до иконки веб-страницы.
Тег body – важный тег, который содержит в себе весть контент, который отображается на веб-странице в браузере. Как правило в этом теге выделяют три основных части: шапка сайта, основное содержимое и подвал сайта. В шапке сайта обычно содержится иконка сайта, меню и другие элементы, которые будут отображаться на всех страницах сайта. Для отображения шапки сайта используется тег header.
Для отображения основного контента веб-страницы используется обычно тег main. Внутрь него уже помещают структуру, которая отображается на странице. Это может быть:
- текст,
- боковое меню,
- картинки,
- таблицы,
- программный код,
- заголовки,
- ссылки.
Для каждого контента внутри тега main используются свои теги. Так, например, если веб-страница состоит из нескольких частей, каждую из них стоит обернуть в тег section. Для статьи необходимо использовать тег article.
Чтобы отобразить подвал сайта используют тег footer. Там обычно содержится контактная информация, ссылки на ключевые страницы сайта, ссылки на документы, года работы сайты и значок копирайт.
Как создается веб-страница
Когда браузер загружает HTML-код страницы, он строит на основании него объектную модель документа (DOM). Процесс преобразования исходного кода HTML-документа в отображение стилизованной и интерактивной картинки на экране называется Critical Rendering Path (CRP).
Хотя этот процесс состоит из большого количества шагов, их грубо можно представить в виде двух:
- Анализирует HTML-документ, чтобы определить то, что в конечном итоге нужно отобразить на страниц;
- Выполняет отрисовку того, что нужно отобразить.
Результатом первого этапа является формирование дерева рендеринга (render tree). Данное дерево содержит видимые элементы и текст, которые нужно отобразить на странице, и также связанные с ними стили. В render tree каждый элемент содержит соответствующий ему объект DOM и рассчитанные для него стили. Таким образом, render tree описывает визуальное представление DOM.
Чтобы построить дерево рендеринга, браузеру нужны две вещи:
- DOM, который он формирует из полученного HTMLкода;
- CSSOM (CSS Object Model), который он строит из загруженных и распознанных стилей.
На втором этапе браузер выполняет отрисовку render tree. Для этого он:
- рассчитывает положение и размеры каждого элемента в render tree, этот шаг называется Layout;
- выполняет рисование, этот шаг называется Paint.
После Paint все нарисованные элементы находятся на одном слое. Для повышения производительности страницы браузер выполняет ещё один шаг, который называется Composite. В нем он группирует элементы по композиционным слоям. Именно благодаря этому этапу фронтенд-разработчик может создать на странице плавную анимацию элементов при использовании таких свойств как transform, opacity. Так как изменение этих свойств вызовет только одну задачу Composit
Пример HTML кода и отображение в браузере
Далее представлен пример HTML разметки.
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
padding: 0;
margin: 0;
display: grid;
grid-template-rows: 50px auto 60px;
}
header > nav {
height: 100%;
}
header > nav,
main,
footer > div {
max-width: 1600px;
margin: 0 auto;
}
header > nav > ul {
height: 100%;
display: grid;
grid-template-columns: repeat(3, max-content);
list-style: none;
padding: 0;
margin: 0;
column-gap: 10px;
}
header > nav > ul > li {
align-self: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">
Главная
</a>
</li>
<li>
<a href="/about">
О сайте
</a>
</li>
<li>
<a href="/contacts">
Контакты
</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>
Заголовок в тексте
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi felis turpis, faucibus eget cursus nec, dignissim quis eros. Maecenas volutpat tincidunt nunc. Nulla luctus ligula at consectetur facilisis. Nulla semper lorem tortor, sit amet finibus magna venenatis sit amet. Phasellus in elit ipsum. Duis viverra nulla et lectus semper aliquet. Mauris tincidunt, lacus elementum bibendum fringilla, nibh massa molestie neque, iaculis varius elit felis quis odio. Aenean tortor dui, hendrerit a viverra in, imperdiet quis orci.
</p>
</main>
<footer>
<div>
© Все права защищены
</div>
</footer>
</body>
</html>Разметка содержит блоки head и body. Внутри head добавлен заголовок веб-страницы, служебная информация о сайте для поисковых роботов. Также для приятного отображения контента были добавлены CSS стили.
В теге body добавлена шапка, контент и подвал веб-страницы. Шапка состоит из простого списка ссылок. В основном контенте представлен заголовок и текст сгенерированный при помощи Lorem Ipsum. В футере веб-страницы содержится значок копирайт и текст о защите прав.
Если открыть представленный выше HTML документ в браузере будет отображаться веб-страница как на скрине ниже.
Далее перейдем в инструменты разработчика и посмотрим DOM, который отрисовал браузер. Для примера используется браузер Google Chrome, но вы можете проделать то же самое в любом другом браузере. Чтобы перейти в режим разработчика необходимо нажать сочетание клавиш на клавиатуре ctrl + shift + i, либо нажать правой кнопкой мыши и выбрать меню «Просмотреть код».
На скрине показаны узлы DOM, которые были построены на основе HTML разметки.
Работа с DOM при помощи JavaScript
Пример выше мог ввести вас в заблуждение, и вы могли задаться вопросом «Узлы были построены согласно HTML разметке и для чего тогда нужен DOM?». Следующим примером будет показано, как происходит обращение к элементам на странице и происходит манипуляция с ними. Для этого потребуется немного языка программирования JavaScript.
Первым делом обновим HTML разметку и добавим кнопку, по которой будем добавлять новый абзац с текстом. Пример HTML разметки для кнопки представлен ниже.
<button>
Добавить абзац
</button>Затем в разметку HTML внизу тега body добавим код JavaScript. Код JavaScript обязательно добавляется снизу тега body, чтобы контент отображался раньше. Так как для пользователя важно, чтобы он как раньше увидел то, что содержится на странице.
<script>
const button = document.getElementsByTagName('button')[0];
const main = document.getElementsByTagName('main')[0];
button.addEventListener('click', () => {
const newElement = document.createElement('p');
newElement.innerText = 'Новый абзац';
main.appendChild(newElement);
});
</script>В примере представлен обработчик прослушивания клика по кнопке. После клика происходит добавление нового абзаца в тег main с текстом «Новый абзац».
Если протестировать данный код, то на странице будет следующий результат.
И теперь посмотрим в инструменты разработчика и увидим новый узел, которого нет в разметке HTML.
Этот процесс как раз-таки и называется работа с DOM. Новый параграф добавился при помощи JavaScript кода и отображается в браузере, но его нет в разметке. А если перезагрузить страницу, то этот параграф снова пропадет. Это связано с тем, что браузер не сохраняет состояние между перезагрузками страницы и каждый раз запрашивает странице заново.
Заключение
DOM это удобный интерфейс для работы с отображениями элементов в браузере. Любой HTML или XML документ может быть представлен в виде DOM дерева. Теги становятся узлами-элементами и формируют структуру веб-страницы в браузере.
Для работы с элементами DOM дерева может использоваться любой язык программирования, но в браузере применяется только JavaScript.
В данное статье был представлен пример HTML разметки, отображение ее в браузере и построение на основе ее DOM дерева. Затем был разработан скрипт, при помощи которого, по клику мышки, добавлялся новый абзац на веб-страницу.
Обязательные поля помечены *