DOM

Определение: DOM (Document Object Model) — это “дерево” объектов, в которое браузер превращает HTML-страницу. По DOM JavaScript находит элементы, читает и меняет их содержимое, атрибуты и классы, а также подписывается на события (клики, ввод, прокрутку).

Зачем это нужно

• Находить элементы на странице по селекторам и работать с ними из JavaScript.
• Динамически менять контент: тексты, изображения, списки, состояния кнопок.
• Добавлять/удалять элементы: например, показывать уведомления или строить список товаров.
• Реагировать на действия пользователя через события (click, input, submit и т.д.).
• Обновлять интерфейс без перезагрузки страницы (современные “живые” интерфейсы).
• Отлаживать верстку: через DevTools видно, что реально находится на странице.

Пример

Пример кода:

document.querySelector('.price').textContent='1 990 ₽';

Скриншот

Подпись к скриншоту: DevTools “Elements”: DOM-дерево страницы и выбранный элемент, чтобы показать структуру и вложенность

Частые ошибки

• Путать DOM и HTML: HTML — исходный код, DOM — то, что браузер построил (и оно может меняться).
• Делать много изменений DOM по одному свойству в цикле, вызывая лишние перерисовки и тормоза.
• Вешать обработчики на каждый элемент, когда проще использовать делегирование событий.
• Использовать слишком общие селекторы и случайно менять не те элементы.
• Менять innerHTML без необходимости и без проверки данных, создавая риски и баги.

Связанные термины

• HTML
• JavaScript
• Event (событие)
• Селектор
• DOM-дерево
• Классы (class)
• DevTools

Наши услуги

• Доработка сайтов — добавим интерактив, исправим ошибки в скриптах и корректную работу с DOM.
• Создание корпоративных сайтов — сделаем клиентскую часть с понятной структурой и стабильным поведением.
• Техническая поддержка сайта — следим за стабильностью фронтенда и быстро устраняем проблемы в интерфейсе.