Сайт, который не умеет меняться без перезагрузки, сегодня выглядит как музейный экспонат. Пользователь нажал кнопку — и хочет сразу увидеть результат. Именно поэтому умение работать с DOM превращает статичную вёрстку в живой интерфейс. Разберём, как это делать правильно и без боли.
Что такое DOM и зачем его трогать
DOM (Document Object Model) — это дерево объектов, которое браузер строит из HTML-кода. Каждый тег становится узлом, а JavaScript получает к нему доступ. Проще говоря, DOM — это мостик между вашим кодом и тем, что видит пользователь на экране.
Когда вы меняете DOM, браузер перерисовывает страницу. Меняете текст заголовка — пользователь видит новый текст. Добавляете класс — элемент меняет вид. Всё это происходит без перезагрузки, и именно это делает интерфейсы отзывчивыми.
Главное правило: сначала найдите элемент, потом с ним работайте. Без ссылки на узел вы ничего не измените.
Как найти нужный элемент
У браузера есть несколько методов поиска. Выбор зависит от задачи: ищете по id, по классу, по селектору или по тегу.
| Метод | Что возвращает | Когда использовать |
|---|---|---|
| getElementById | Один элемент | Уникальный id — самый быстрый вариант |
| querySelector | Первый подходящий элемент | Любой CSS-селектор, гибко |
| querySelectorAll | Список всех совпадений | Массовые операции над группой элементов |
| getElementsByClassName | Живую коллекцию | Когда нужна автоматическая актуализация |
Пример поиска и изменения текста:
const title = document.getElementById('main-title');
title.textContent = 'Новый заголовок';
const items = document.querySelectorAll('.card');
items.forEach(item => {
item.classList.add('active');
});
Меняем содержимое, стили и структуру
Найти элемент — половина дела. Дальше нужно его изменить. Есть три больших направления: контент, стили и структура.
Контент. Для текста используйте textContent, для HTML-разметки — innerHTML. Второй мощнее, но опаснее: не вставляйте туда данные от пользователя без очистки.
const box = document.querySelector('.message');
box.textContent = 'Сообщение обновлено';
box.innerHTML = 'Жирный текст';
Стили и классы. Прямое изменение style — быстрый способ, но лучше управлять классами. Так логика остаётся в CSS, а не размазывается по JS.
const button = document.querySelector('.btn');
button.classList.add('loading');
button.classList.remove('disabled');
button.classList.toggle('pressed');
Структура. Создавать узлы лучше через createElement, а вставлять — через append или prepend. Это безопаснее и понятнее, чем склейка строк.
const list = document.querySelector('.list');
const newItem = document.createElement('li');
newItem.textContent = 'Новый пункт';
list.append(newItem);
Практические советы и лайфхаки
Опытные разработчики не изобретают велосипед. Вот несколько привычек, которые экономят время и нервы.
- Кэшируйте ссылки на элементы. Искать один и тот же узел в цикле — пустая трата ресурсов.
- Используйте делегирование событий: один обработчик на контейнер лучше сотни обработчиков на детей.
- Для больших списков применяйте DocumentFragment — вставляйте всё за один раз.
- Не смешивайте бизнес-логику и работу с DOM. Вынесите изменения в отдельные функции.
- Проверяйте, что элемент существует, прежде чем к нему обращаться. Иначе получите ошибку в консоли.
Пример делегирования событий:
document.querySelector('.menu').addEventListener('click', (event) => {
const target = event.target.closest('.menu-item');
if (!target) return;
target.classList.toggle('selected');
});
А вот как выглядит разметка, к которой применяется такой скрипт:
Иногда удобно готовить данные на сервере и отдавать их фронтенду. На PHP это может выглядеть так:
';
foreach ($items as $item) {
echo '' . htmlspecialchars($item) . ' ';
}
echo '';
?>
Что в итоге
DOM — это рабочий инструмент, а не страшный зверь. Найдите элемент, измените контент или класс, добавьте новый узел — и интерфейс оживает. Главное — не делать лишних операций и держать логику в порядке.
Начните с малого: обновите текст в блоке по клику. Потом добавьте класс. Потом создайте элемент. Через пару вечеров вы будете делать динамические интерфейсы уверенно и без гугла на каждый чих.
Студия WNDER
