Что такое ДОМ?

DOM

предисловие

Эта статья является переводом, если есть какие-либо возражения, пожалуйста, предложите исправления, добро пожаловать на чтение.

автор:Ire Aderinokun

Оригинальный адрес:What, exactly, is the DOM?

текст

Объектная модель документа, или «DOM», представляет собой интерфейс к веб-странице. По сути, это API страницы, позволяющий программам читать и управлять содержимым, структурой и стилем страницы. Давайте сломаем это.

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

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

HTML-to-Render-Tree-to-Final

Результатом первого этапа является то, что называется «деревом рендеринга». Дерево рендеринга — это представление элементов HTML и связанных с ними стилей, которые будут отображаться на странице. Чтобы построить это дерево, браузеру нужны две вещи:

  1. CSSOM, представление стилей, связанных с элементом
  2. DOM, представление элементов

Как создается DOM (и как он выглядит)?

DOM — это объектное представление исходного HTML-документа. Как мы увидим ниже, он имеет некоторые отличия, но по сути является попыткой преобразовать структуру и содержимое HTML-документа в объектную модель, которую могут использовать различные программы.

Объектная структура DOM представлена ​​так называемым «деревом узлов». Он так называется, потому что его можно представить как дерево, у него есть единственный родительский ствол, и он может разветвляться на несколько подветвей, каждая из которых может иметь листья. В этом примере родительский «стебель» — это корневой элемент, дочерняя «ветвь» — это вложенный элемент, а «лист» — это содержимое внутри элемента.

Давайте возьмем этот HTML-документ в качестве примера:

<!doctype html>
<html lang="en">
 <head>
   <title>My first web page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>How are you?</p>
  </body>
</html>

Этот документ можно представить в виде следующего дерева узлов:

Чем не является DOM?

В примере, который я привел выше, DOM выглядит как взаимно однозначное сопоставление исходного HTML-документа или DevTools, которые вы видите. Однако, как я уже говорил, есть некоторые отличия. Чтобы полностью понять, что такое DOM, нам нужно понять, чем он не является.

DOM не является исходным HTML

Хотя DOM создается из исходного HTML-документа, он не всегда одинаков. В обоих случаях DOM может отличаться от исходного HTML.

1. Когда HTML недействителен

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

Давайте возьмем этот HTML-документ в качестве примера:

<!doctype html>
<html>
Hello, world!
</html>

Документации не хватает<head>и<body>элемент, который является требованием для корректного HTML. Если мы посмотрим на результирующее DOM-дерево, то увидим, что это было исправлено:

2. Когда DOM модифицируется Javascript

Помимо интерфейса для просмотра содержимого HTML-документа, DOM можно изменить, чтобы сделать его активным ресурсом. Например, мы можем использовать Javascript для создания дополнительных узлов для DOM.

var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);

Это обновит DOM, но, конечно, не HTML-документ.

DOM — это не то, что вы видите в браузере (например, дерево рендеринга).

То, что вы видите в представлении браузера, — это дерево рендеринга, которое представляет собой комбинацию DOM и CSSOM, как упоминалось ранее. Настоящая разница между DOM и деревом рендеринга заключается в том, что последнее содержит только то, что в конечном итоге будет отрисовано на экране.

Поскольку дерево рендеринга фокусируется только на том, что визуализируется, оно исключает элементы, которые визуально скрыты. Например, сdisplay: noneЭлемент, с которым связан стиль.

<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>

DOM будет содержать<p>элемент:

Однако дерево рендеринга и то, что видно на виде, не будет содержать этот элемент.

DOM — это не DOM в DevTools

Разница невелика, так как инспектор элементов DevTools обеспечивает самое близкое приближение к DOM в браузере. Однако инспектор DevTools содержит дополнительную информацию, которой нет в DOM.

Лучший пример — псевдоэлементы CSS. использовать::beforeи::afterПсевдоэлементы, созданные селекторами, являются частью CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного документа HTML, исключая стили, применяемые к элементам.

Хотя псевдоэлементы не являются частью DOM, они находятся в нашем инспекторе элементов devtools.

Вот почему Javascript не может ориентироваться на псевдоэлементы, потому что они не являются частью DOM.

обзор

DOM — это интерфейс для HTML-документов. Браузеры используют его в качестве первого шага при принятии решения о том, что отображать в представлении, и изменяют содержимое, структуру или стиль страницы с помощью программы Javascript.

Хотя DOM похож на другие формы исходных HTML-документов, он во многом отличается:

  • это всегда действительный HTML
  • Это живая модель, которую можно изменить с помощью Javascript.
  • Он не содержит псевдоэлементов (например,::after)
  • Он содержит скрытые элементы (например,display: none)
Категории