DOM — это объектная модель документа, которую браузер создает в памяти компьютера на основании HTML-кода, полученного им от сервера. Иными словами, это представление HTML-документа в виде дерева тегов. Браузер запрашивает у сервера веб-страницу и получает в ответ ее исходный HTML-код. Браузеру такой код сначала нужно разобрать на элементы. В процессе разбора он строит на основе HTML-кода DOM-дерево. После этого браузер отрисовывает страницу, используя созданное им DOM-дерево, а не исходный HTML-документ. Такое дерево нужно для правильного отображения сайта и внесения изменений на страницах с помощью JavaScript. JavaScript — это «живой» язык, он может изменять страницу в реальном времени уже после того, как она «пришла» с сервера в браузер. Этим JavaScript принципиально отличается от PHP, который компилирует страницу и только потом посылает в браузер уже готовый HTML-код. ![Схема отображения страницы в браузере](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image6-1.png) Для чтения и изменения DOM браузеры предоставляют DOM API (программный интерфейс). DOM API — это набор различных объектов, которые разработчик использует для чтения и изменения DOM с помощью JavaScript. ### Из чего состоит HTML-код страницы Страница на HTML состоит из тегов, вложенных в друг друга. Самый общий тег — это HTML. В него вкладываются два дочерних тега head и body. Тег head используется для подключения информации, которая не будет отображаться непосредственно на странице, но будет использоваться для подключения важных файлов. Тут бывает, например, подключение одного или нескольких CSS-файлов, подключенные шрифты, название сайта, язык, кодировка, скрипты, которые должны выполняться в первую очередь, иконка сайта или базовый фон. В body находится значимое содержимое. Обычно в body выделяют три части: шапка сайта, основное содержимое и подвал. В шапке обычно содержится верхнее меню сайта, за это отвечает тег header. Для содержимого нет определенного тега, но обычно используется section. Для подвала используется footer, там обычно содержатся контактная информация, ссылки на ключевые страницы сайта и копирайт. Теги header и footer должны быть единственными на странице, а section может бесконечно повторяться. ## Как строится DOM-дерево Для описания структуры DOM потребуются термины: корневой, родительские и дочерние элементы. Корневой элемент находится в основании всей структуры и не имеет родительского элемента. Дочерние элементы не просто находятся внутри родительских, но и наследуют различные свойства от них. На картинке ниже изображено DOM-дерево. ![DOM-дерево](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image4-1.png) Корневой элемент здесь html — без него страница не будет скомпилирована. Он не имеет родительского (вышестоящего) элемента, но имеет два наследника или дочерних элемента — head и body. По отношению друг к другу элементы head и body являются сиблингами (братьями и сестрами). В каждый из них можно вложить еще много дочерних элементов. Например, в head обычно находятся link, meta, script или title. Все эти теги не являются уникальными, и в одном документе может быть по несколько экземпляров каждого из них. В body могут находиться разнообразные элементы. Например, в родительском body — дочерний элемент header, в элементе header — дочерний элемент section, в родительском section — дочерний div, в div — элемент h3, и наконец, в h3 — элемент span. В этом случае span не имеет дочерних элементов, но их можно добавить в любой момент. Можно описать это так: ![Графическое представление элементов HTML-страницы](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image5-1.png) А если бы система была бы более разветвленная и с большим количеством вложений — так: ![Графическое представление элементов HTML-страницы](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image1-2.png) На схеме изображено довольно большое DOM-дерево, и его сложно воспринимать из-за его размера. Для удобства часто используется система многоуровневых списков. Например, предыдущее дерево можно преобразовать в такой список: ![Представление элементов HTML-страницы в виде списка](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image2-2.png) Если преобразовать дерево на предыдущем рисунке в код, то получится так: ```js

``` Как видно из кода, некоторые теги должны закрываться, а некоторые — нет. Эту схему важно понимать, чтобы разобраться с темой наследования свойств. Элементы могут наследовать не все, но многие свойства своих родителей — например, цвет, шрифт, видимость и т.д. Таким образом, чтобы задать стиль шрифта на всей странице, потребуется не прописывать цвет для каждого элемента, а задать его только для body. А чтобы изменить наследуемое свойство у дочернего элемента, нужно прописать только ему новые свойства. Наследование удобно для создания единообразной страницы. ### Зачем нужно знать, как строится DOM-дерево? Большинство действий при работе с DOM сводится к поиску нужных элементов. Не понимая, как строится DOM-дерево, и не зная, каковы связи между узлами, найти нужный элемент будет сложно. ### Как просмотреть DOM-дерево? В любом браузере есть инструменты, с помощью которых можно отобразить DOM-дерево. Если выбрать какой-либо объект в структуре, он будет подсвечен на странице. При этом для него будут выведены свойства CSS, которые работают сейчас, и те, которые не задействованы. Чтобы посмотреть DOM в браузере, нужно зайти в инструменты разработчика. В большинстве браузеров для этого надо нажать на F12 — тогда откроется дополнительная панель с вкладками и зонами. ![Просмотр DOM-дерева в браузере](https://blog.skillfactory.ru/wp-content/uploads/2021/09/image3-2.png) На изображении выше во вкладке Elements представлена структура DOM в виде многоуровневого вложенного списка. Каждый элемент можно открыть и посмотреть, что у него внутри, его расположение на странице и размеры этого элемента со всеми отступами. Также там находятся другие инструменты — например консоль, где выводится информация об ошибках и куда можно ввести необходимые данные, например для отладки (исправления ошибок в коде). Панель ресурсов отображает подключенные ресурсы — это шрифты, изображения, JavaScript- и CSS-файлы. По Web могут спросить что-то типа такого: «Что происходит, когда пользователь набирает в браузере адрес сайта?». Можно раскрыть, как браузер начинает искать сервер, как отправляет запрос к DNS-серверам, как попакетно устанавливается соединение с сервером, процесс обработки запросов и так далее. Кроме того, могут спросить про коды состояний HTTP (Informational/Success/Redirection/Client Error/Server Error) и методы HTTP (GET/POST/PUT/DELETE). как функционирует веб-приложение: понимать устройство HTTP-протокола, разбираться в связке HTML/CSS/JS.

ПОНИМАНИЕ DOM МОДЕЛИ

Понимание DOM модели