Объектная модель документа

Last updated 1 year ago

Объектная модель документа

1. Введение

Когда мы работаем с браузером, доступный функционал состоит из нескольких частей, так как JavaScript сам по себе не имеет инструментов для работы с браузером.

DOM (Document Object Model, Объектная модель документа) — межплатформенный, независимый от языка интерфейс для работы с HTML-документом. Содержит набор свойств и методов позволяющих искать, создавать и удалять элементы, реагировать на действия пользователя и другое.

BOM (Browser Object Model, Объектная модель браузера) — межплатформенный, независимый от языка интерфейс для работы с окном браузера. Содержит набор свойств и методов, позволяющих получить доступ непосредственно к текущей вкладке и ряду функций браузера. Включает объект работы с историей, местоположением и другое.

2. Объектная модель документа

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

DOM выполняет две роли: является объектным представлением HTML-документа и действует как интерфейс, соединяющий страницу с языком программирования, например JavaScript.

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

3. HTML-документ и DOM

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

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

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

Браузер строит DOM постепенно, как только приходят первые фрагменты кода, он начинает парсить HTML, добавляя узлы в древовидную структуру.

После того как DOM-дерево построено, можно найти в нем элемент с помощью JavaScript и выполнять с ним какие-то действия, так как каждый узел имеет интерфейс с множеством свойств и методов.

4. DOM-дерево

<!DOCTYPE html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <div>
      <h2>Title</h2>
      <p>Some text</p>
      <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
      </ul>
    </div>
  </body>
</html>
Copy

В этом дереве выделены два типа узлов:

Узлы-элементы (element node) — образуются тегами, естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
Текстовые узлы (text node) — образуются текстом внутри элементов. Текстовый узел содержит только строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне иерархии. Пробелы и переносы строк - это тоже текстовые узлы.

Из этого правила есть исключения: пробелы до head игнорируются, а любое содержимое после body не создаёт узла, браузер переносит его в конец body.

PreviousЦиклы NextНавигация по DOM

Last updated 1 year ago

1. Введение

2. Объектная модель документа

3. HTML-документ и DOM

4. DOM-дерево

Составим дерево HTML-документа используя .

<!DOCTYPE html>
<html>
  <head>
    <title>DOM</title>
  </head>
  <body>
    <div>
      <h2>Title</h2>
      <p>Some text</p>
      <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">link 3</a></li>
      </ul>
    </div>
  </body>
</html>
Copy

В этом дереве выделены два типа узлов:

Узлы-элементы (element node) — образуются тегами, естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
Текстовые узлы (text node) — образуются текстом внутри элементов. Текстовый узел содержит только строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне иерархии. Пробелы и переносы строк - это тоже текстовые узлы.