Dom дерево для чего

Что такое DOM и зачем он нужен?

В этой статье мы изучим: как создаётся веб-страница в браузере, что такое DOM и зачем он нужен, как строится DOM-дерево, типы узлов и отношения между ними.

Как создаётся веб-страница?

Когда браузер загружает HTML-код страницы, он строит на основании него объектную модель документа (на английском Document Object Model или сокращённо DOM).

Перед тем как перейти к изучению DOM , рассмотрим сначала все основные этапы работ , которые выполняет браузер для преобразования исходного кода HTML-документа в отображение стилизованной и интерактивной картинки на экране. Кстати, этот процесс называется Critical Rendering Path (CRP) .

Хотя этот процесс состоит из большого количества шагов, их грубо можно представить в виде двух:

1. Анализирует HTML-документ, чтобы определить то, что в конечном итоге нужно отобразить на странице;
2. Выполняет отрисовку того что нужно отобразить.

Результатом первого этапа является формирование дерева рендеринга (render tree). Данное дерево содержит видимые элементы и текст, которые нужно отобразить на странице, и также связанные с ними стили. Это дерево дублирует структуру DOM, но включает как мы отметили выше только видимые элементы. В render tree каждый элемент содержит соответствующий ему объект DOM и рассчитанные для него стили. Таким образом, render tree описывает визуальное представление DOM.

Чтобы построить дерево рендеринга , браузеру нужны две вещи:

• DOM , который он формирует из полученного HTML-кода;
• CSSOM (CSS Object Model) , который он строит из загруженных и распознанных стилей.

На втором этапе браузер выполняет отрисовку render tree . Для этого он:

• рассчитывает положение и размеры каждого элемента в render tree, этот шаг называется Layout ;
• выполняет рисование, этот шаг называется Paint .

После Paint все нарисованные элементы находятся на одном слое. Для повышения производительности страницы браузер выполняет ещё один шаг, который называется Composite . В нем он группирует элементы по композиционным слоям. Именно благодаря этому этапу мы можем создать на странице плавную анимацию элементов при использовании таких свойств как transform , opacity . Так как изменение этих свойств вызовет только одну задачу Composite .

Для работы со слоями в Chrome есть отличный инструмент Layers .

Например, изменения свойства color вызовет сначала задачу Paint , а затем вероятнее всего последует Composite всех затронутых элементов.

Изменение width вызовет следующие задачи: Layout -> Paint -> Composite .

Layout и Paint – это ресурсоемкие процессы, поэтому для хорошей отзывчивости вашей страницы или веб-приложения, необходимо свести к минимуму операции которые их вызывают.

Список свойств, изменение которых вызывают Paint :

• color ;
• background ;
• visibility ;
• border-style и другие.

Список свойств, изменение которых вызывает Layout :

• width и height ;
• padding и margin ;
• display ;
• border ;
• top , left , right и bottom ;
• position ;
• font-size и другие.

Кроме этого, Layout срабатывает не только при изменении CSS-свойств, но также, например когда мы хотим получить смещение элемента ( el.offsetLeft , el.offsetTop и так далее) или его положение ( el.clientLeft , el.clientTop и так далее), а также во многих других случаях. Более подробно ознакомиться с этими операциями можно здесь.

Чтобы понимать какую стоимость имеет то или иное свойство, можно установить расширение css-triggers для редактора кода VS Code:

Что же такое DOM?

DOM – это объектное представление исходного HTML-кода документа. Процесс формирования DOM происходит так: браузер получает HTML-код, парсит его и строит DOM.

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

Почему не использовать в этом случае просто HTML? Потому что HTML – это текст, и с ним невозможно работать так как есть. Для этого нужно его разобрать и создать на его основе объект, что и делает браузер. И этим объектом является DOM.

Итак, DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода.

По-простому, HTML-код – это текст страницы, а DOM – это объект, созданный браузером при парсинге этого текста.

Но, браузер использует DOM не только для выполнения процесса CRP , но также предоставляет нам программный доступ к нему . Следовательно, с помощью JavaScript мы можем изменять DOM.

DOM – это технология не только для браузеров и JavaScript. Существуют и другие инструменты, позволяющие работать с DOM. Например, работа с DOM может осуществляться серверными скриптами, после загрузки и парсинга ими HTML-страницы. Но это немного другая тема и мы не будем рассматривать её здесь.

Все объекты и методы, которые предоставляет браузер описаны в спецификации HTML DOM API, поддерживаемой W3C. С помощью них мы можем читать и изменять документ в памяти браузера.

Например, с помощью JavaScript мы можем:

• добавлять, изменять и удалять любые HTML-элементы на странице, в том числе их атрибуты и стили;
• получать доступ к данным формы и управлять ими;
• реагировать на все существующие HTML-события на странице и создавать новые;
• рисовать графику на HTML-элементе и многое другое.

При изменении DOM браузер проходит по шагам CRP и почти мгновенно обновляет изображение страницы. В результате у нас всегда отрисовка страницы соответствует DOM.

Благодаря тому, что JavaScript позволяет изменять DOM, мы можем создавать динамические и интерактивные веб-приложения и сайты. С помощью JavaScript мы можем менять всё что есть на странице. Сейчас в вебе практически нет сайтов, в которых не используется работа с DOM.

В браузере Chrome исходный HTML-код страницы, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика»:

На вкладке Elements мы видим что-то очень похожее на DOM:

Однако DevTools включает сюда дополнительную информацию, которой нет в DOM. Отличным примером этого являются псевдоэлементы в CSS. Псевдоэлементы, созданные с помощью селекторов ::before и ::after , являются частью CSSOM и дерева рендеринга, и технически не являются частью DOM. Мы с ними не может взаимодействовать посредством JavaScript.

По факту DOM создается только из исходного HTML-документа и не включает псевдоэлементы. Но в инспекторе элементов DevTools они имеются.

Как строится DOM?

Перед тем, как перейти к DOM, сначала вспомним, что собой представляет исходный HTML-код документа. В качестве примера рассмотрим следующий:

Как вы уже знаете, HTML-документ – это обычный текстовый документ. Его код состоит из тегов, атрибутов, текста, комментариев и так далее. Очень важной сущностью в нём является HTML-элемент. На них всё строится. HTML-элемент в большинстве случаев состоит из открывающего и закрывающего тегов, между которыми располагается его содержимое. Например, HTML-элемент h1 имеет открывающий тег

, закрывающий

Также очень важно понимать, что в HTML-коде одни элементы вкладываются в другие. Например,

вложен в , а в . Это очень важная концепция, которая нам и позволяет нам создавать определённую разметку в HTML.

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM. Объектная структура DOM представляет собой дерево узлов (узел на английском называется node ). При этом DOM-узлы образуются из всего, что есть в HTML: тегов, текстового контента, комментариев и т.д.

Корневым узлом DOM-дерева является объект document , он представляет сам этот документ. Далее в нём расположен узел . Получить этот элемент в коде можно так:

В находятся 2 узла-элемента: и . Получить их в коде можно так:

В находится DOM-узел :

В находится текстовый узел. Теперь перейдём к . В нём находятся 2 элемента

и

, и так далее.

При этом, как вы уже поняли, узлы в зависимости от того, чем они образованы делятся на разные типы. В DOM выделяют:

• узел, представляющий собой весь документ; этим узлом является объект document ; он выступает входной точкой в DOM;
• узлы, образованные тегами, их называют узлами-элементами или просто элементами;
• текстовые узлы, они образуются текстом внутри элементов;
• узлы-комментарии и так далее.

Имеются и другие типы узлов, но на практике в основном используются только перечисленные выше.

Каждый узел в дереве DOM является объектом. Но при этом формируют структуру DOM только узлы-элементы. Текстовые узлы, например, содержат в себе только текст. Они не могут содержать внутри себя другие узлы. Поэтому вся работа с DOM в основном связана с узлами-элементами.

Кстати, директива тоже является DOM-узлом. Но она нам не интересна, поэтому на схеме мы её опустили.

Чтобы перемещаться по узлам DOM-дерева нужно знать какие они имеют отношения. Зная их можно будет выбирать правильные свойства и методы. Связи между узлами, определяются их вложенностью. Каждый узел в DOM может иметь следующие виды отношений:

• родитель – это узел, в котором он непосредственно расположен; при этом родитель у узла может быть только один; также узел может не иметь родителя, в данном примере им является document ;
• дети или дочерние узлы – это все узлы, которые расположены непосредственно в нём; например, узел
  имеет 2 детей;
  • соседи или сиблинги – это узлы, которые имеют такого же родителя что и этот узел;
  • предки – это его родитель, родитель его родителя и так далее;
  • потомки – это все узлы, которые расположены в нем, то есть это его дети, а также дети его детей и так далее.

  имеет в качестве родителя . Ребенок у него один – это текстовый узел «Мобильные ОС». Сосед у него тоже только один – это

  .

Теперь рассмотрим, каких предков имеет текстовый узел «iOS». У него они следующие:
,

, и .

У элемента 2 потомка: и текстовый узел «Моя страница».

Зачем нужно знать, как строится DOM-дерево? Во-первых, это понимание той среды, в которой вы хотите что-то изменять. Во-вторых, большинство действий при работе с DOM сводится к поиску нужных элементов. Но не зная как устроено DOM-дерево и отношения между узлами, найти что-то в нём будет достаточно затруднительно.

Задания

1. Представленное DOM-дерево преобразуйте обратно в HTML-код:

Источник

DOM-дерево

Основой HTML-документа являются теги.

В соответствии с объектной моделью документа («Document Object Model», коротко DOM), каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.

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

Например, document.body – объект для тега .

Если запустить этот код, то станет красным на 3 секунды:

Это был лишь небольшой пример того, что может DOM. Скоро мы изучим много способов работать с DOM, но сначала нужно познакомиться с его структурой.

Пример DOM

Начнём с такого, простого, документа:

DOM – это представление HTML-документа в виде дерева тегов. Вот как оно выглядит:

На рисунке выше узлы-элементы можно кликать, и их дети будут скрываться и раскрываться.

Каждый узел этого дерева – это объект.

Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: – это корневой узел, и его дочерние узлы и т.д.

Текст внутри элементов образует текстовые узлы, обозначенные как #text . Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.

Например, в теге есть текстовый узел «О лосях» .

Обратите внимание на специальные символы в текстовых узлах:

• перевод строки: ↵ (в JavaScript он обозначается как \n )
• пробел: ␣

Пробелы и переводы строки – это полноправные символы, как буквы и цифры. Они образуют текстовые узлы и становятся частью дерева DOM. Так, в примере выше в теге есть несколько пробелов перед , которые образуют текстовый узел #text (он содержит в себе только перенос строки и несколько пробелов).

Существует всего два исключения из этого правила:

1. По историческим причинам пробелы и перевод строки перед тегом игнорируются
2. Если мы записываем что-либо после закрывающего тега

Источник

Dom дерево для чего

На чём стоят три слона, на которых держится веб?

Время чтения: меньше 5 мин

Обновлено 6 октября 2022

Кратко

Скопировать ссылку на секцию «Кратко» Скопировано

DOM (Document Object Model) — это специальная древовидная структура, которая позволяет управлять HTML-разметкой из JavaScript-кода. Управление обычно состоит из добавления и удаления элементов, изменения их стилей и содержимого.

Браузер создаёт DOM при загрузке страницы, складывает его в переменную document и сообщает, что DOM создан, с помощью события DOM Content Loaded . С переменной document начинается любая работа с HTML-разметкой в JavaScript.

Как пишется

Скопировать ссылку на секцию «Как пишется» Скопировано

Объект document содержит большое количество свойств и методов, которые позволяют работать с HTML. Чаще всего используются методы, позволяющие найти элементы страницы.

Свойства

Скопировать ссылку на секцию «Свойства» Скопировано

• title — заголовок документа. Браузер обычно показывает его на вкладке.

Установить свой заголовок можно простым присваиванием:

• forms — получить список форм на странице. Свойство только для чтения, напрямую перезаписать его нельзя.
• body — получить элемент страницы.
• head — получить элемент страницы.

Методы

Скопировать ссылку на секцию «Методы» Скопировано

• get Element By Id — поиск элемента по идентификатору;
• get Elements By Class Name — поиск элементов по названию класса;
• get Elements By Tag Name — поиск элементов по названию тега;
• query Selector — поиск первого элемента, подходящего под CSS-селектор;
• query Selector All — поиск всех элементов подходящих под CSS-селектор.

Как понять

Скопировать ссылку на секцию «Как понять» Скопировано

Браузер создаёт DOM на основе HTML-кода страницы. Затем на основе DOM и других структур, браузер рисует страницу пользователю. При изменении DOM, браузер анализирует это и обновляет страницу.

DOM и страница, которую видит пользователь, связаны. Если изменишь одно, то изменится и второе:

• пользователь заполняет форму — можно прочитать введённые значения в DOM;
• при выборе страны, мы заполняем список городов в DOM — пользователь видит список.

Высокоуровневая схема такого взаимодействия:

Из чего состоит DOM

Скопировать ссылку на секцию «Из чего состоит DOM» Скопировано

HTML страница — это теги, вложенные друг в друга. Например:

Браузер превращает эту разметку в JavaScript представление, сохраняя при этом вложенность и свойства каждого HTML-элемента. Этого удаётся достичь с помощью специальной структуры данных — дерева.

Каждый тег представляет собой узел дерева. У каждого узла могут быть дочерние узлы — таким образом сохраняется информация о вложенности тегов. Правда, слово тег в этом контексте не используют и говорят элемент. Например, HTML-код выше превратится в такое дерево:

Дерево состоит из обычных и текстовых узлов. Обычные узлы — это HTML-теги, а текстовые узлы — текст внутри тегов.

Обычный узел называется Element , и он содержит в себе описание тега, атрибутов тега и обработчиков. Если изменить описание — изменится и HTML-код этого элемента (возможно что-то даже изменится на экране. Например, если поменять цвет шрифта). В статье Element мы разбираем всё необходимое для работы с элементами.

У любого узла есть один родительский узел и дочерние. Родительский узел — элемент, в который вложен текущий узел, он может быть только один. Дочерние — узлы, которые вложены в текущий узел.

Это правило не работает только в двух случаях:

• корневой узел — у такого узла нет родителя;
• текстовый узел — у таких узлов нет дочерних узлов, только родитель. Последний уровень любого DOM-дерева состоит из текстовых узлов.

На практике

Скопировать ссылку на секцию «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку на секцию «Николай Лопин советует» Скопировано

🛠 Напрямую с DOM работают редко. Обычно работают на уровне элементов.

🛠 Из-за своей древовидной структуры искать элементы по DOM можно не только от корня. В диаграмме выше можно найти сначала элемент ul , а затем искать элементы среди его потомков.

Читайте также

Содержит всю страницу внутри — и метаданные, и контент.

CSS-правило

То, из чего состоят таблицы стилей.

Событийная модель

Что такое события в браузере и почему без них не написать ни одного приложения.

Источник