DOM в JavaScript

16 марта 2026

Автор

Дмитрий Фандорин

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

Форма записи

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

Пример:

// получить элемент по id и изменить его содержимое
const element = document.getElementById('my-element');
element.innerHTML = 'Новый текст';

// добавить новый элемент
const newElement = document.createElement('div');
newElement.innerHTML = 'Новый элемент';
document.body.appendChild(newElement);

// удалить элемент
const oldElement = document.getElementById('old-element');
document.body.removeChild(oldElement);

Понимание DOM необходимо для создания динамических и интерактивных веб-страниц. Без знания DOM невозможно манипулировать элементами страницы, изменять их стили и обрабатывать события. Если вы хотите детально изучить DOM и научиться создавать интерактивные веб-приложения, приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Описание работы

DOM состоит из элементов, которые могут быть вложены друг в друга и образовывать дерево элементов. Каждый элемент имеет родительский элемент, дочерние элементы и соседние элементы.

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Абзац текста</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Эта страница состоит из элементов:

html
- head
  - title
- body
  - h1
  - p
  - ul
    - li
    - li
    - li

Каждый элемент может иметь свойства, такие как id, className и style, которые могут быть использованы для изменения стиля элемента. Они также могут иметь атрибуты, такие как href для ссылок и src для изображений, которые могут быть изменены с помощью JavaScript.

Заключение

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

DOM - это основа для создания интерактивных веб-приложений. Для углубленного изучения работы с DOM, асинхронности и современными техниками JavaScript, рассмотрите курс JavaScript Advanced. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир продвинутого JavaScript прямо сегодня.