LearnJS

Что такое DOM в JavaScript

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

Что такое DOM

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

HTML задаёт начальную структуру страницы. DOM позволяет получить эту структуру в коде и изменить её во время работы сайта.

Как браузер создаёт DOM

Рассмотрим простую разметку:

<!doctype html>
<html>
  <body>
    <h1>Заголовок</h1>
    <button>Сохранить</button>
  </body>
</html>

Браузер представит её примерно как дерево:

document
└── html
    └── body
        ├── h1
        └── button

h1 и button - дочерние элементы body. Такая иерархия помогает JavaScript находить нужный элемент и работать с ним.

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

В DOM есть объект document, объекты элементов - например, html, body, h1 и button - а также текст внутри этих элементов.

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

DOM и HTML

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

Изменение DOM меняет открытую страницу, но не исходный HTML-файл на сервере. После обновления страницы изменения исчезнут, если их не сохранить отдельно.

Объект document

Браузер создаёт объект document для текущей страницы. Через него JavaScript получает доступ к DOM.

console.log(document);
console.log(document.body);

Первое выражение выведет весь документ, а второе - объект элемента body. От document начинается работа со страницей в JavaScript.

Что можно делать через DOM

Через DOM JavaScript может:

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

Итого

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