Когда я впервые увидел код, который меняет текст на странице без перезагрузки, я подумал: "Вот это магия!". Оказалось, никакой магии нет — это просто работа с DOM-деревом. Если вы пишете на PHP и хотите, чтобы ваши страницы оживали, без DOM не обойтись. В этой статье я расскажу, как обращаться с DOM-деревом как со своим любимым инструментом. Без заумных слов, с примерами и жизненными ситуациями.

Что такое DOM-дерево и почему оно как шкаф с ящиками

Представьте, что HTML-страница — это шкаф. В нём есть полки (теги), на полках — вещи (текст, картинки). DOM (Document Object Model) — это схема этого шкафа, которую JavaScript может видеть и трогать. Каждый тег, атрибут, кусочек текста — это узел (node). Узлы связаны между собой как родители и дети. Именно по этим связям мы будем ходить, чтобы что-то менять.

Когда браузер загружает страницу, он строит DOM-дерево. Всё, что вы видите в инспекторе кода — это и есть DOM. И JavaScript может с ним работать: находить элементы, менять их стиль, добавлять новые или удалять старые. Это основа любого динамического интерфейса.

Лайфхак: Откройте консоль браузера (F12) и напишите console.log(document.body). Вы увидите весь DOM-узел body. Это как заглянуть внутрь шкафа.

Как найти нужный элемент: querySelector и его друзья

Чтобы что-то изменить, нужно сначала найти объект. В JavaScript есть несколько способов. Самый удобный и современный — querySelector и querySelectorAll. Они работают как CSS-селекторы: вы пишете то же самое, что и в стилях.

Пример: есть кнопка с классом .btn. Чтобы получить её в JavaScript, пишем:

let button = document.querySelector('.btn');
button.textContent = 'Нажми меня';

Если элементов с таким классом несколько, используем querySelectorAll — он возвращает коллекцию (NodeList). Её можно перебрать циклом.

МетодЧто возвращаетПример
getElementByIdОдин элементdocument.getElementById('header')
getElementsByClassNameHTMLCollection (живая)document.getElementsByClassName('menu')
querySelectorПервый подходящийdocument.querySelector('#footer p')
querySelectorAllNodeList (статичная)document.querySelectorAll('.item')

Важно: HTMLCollection обновляется автоматически при изменении DOM, а NodeList — нет. Это может привести к неожиданностям, если вы удаляете элементы.

Меняем содержимое и стили: innerHTML, textContent и classList

Нашли элемент? Теперь его можно менять. Самые частые операции — изменить текст, HTML-код внутри или стиль.

Для текста используем textContent — он вставляет текст как есть, без интерпретации HTML. Если нужно вставить HTML (например, список), берите innerHTML, но осторожно: это может быть небезопасно, если данные приходят от пользователя (XSS-атаки).

let message = document.querySelector('.message');
message.textContent = 'Привет, мир!';
// Или с HTML:
message.innerHTML = '<strong>Привет</strong>, мир!';

Для стилей есть свойство style. Но лучше не пишите стили прямо в JavaScript, а используйте классы. Для управления классами есть classList:

let box = document.querySelector('.box');
box.classList.add('active');  // добавить класс
box.classList.remove('hidden'); // убрать
box.classList.toggle('visible'); // переключить
Правило: Никогда не используйте innerHTML с данными, которые ввёл пользователь. Всегда очищайте или используйте textContent. Иначе злоумышленник может вставить скрипт.

События: как заставить страницу реагировать на клики

Самое интересное — это реакция на действия пользователя. Клики, наведение мыши, отправка формы. В JavaScript для этого есть события. Вешаем обработчик с помощью addEventListener.

let button = document.querySelector('#myButton');
button.addEventListener('click', function() {
    alert('Кнопка нажата!');
});

Можно передать и отдельную функцию:

function handleClick() {
    console.log('Клик!');
}
button.addEventListener('click', handleClick);
// Чтобы убрать обработчик:
button.removeEventListener('click', handleClick);

События бывают разные: click, mouseover, keydown, submit, input. Для форм удобно использовать событие submit, чтобы перехватить отправку и не перезагружать страницу.

Ещё есть всплытие событий (bubbling). Когда вы кликаете на вложенный элемент, событие сначала срабатывает на нём, потом поднимается до родителя. Это позволяет вешать один обработчик на контейнер, а не на каждый элемент внутри.

document.querySelector('.list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Клик по пункту списка:', event.target.textContent);
    }
});

Создаём и удаляем элементы: жизнь без перезагрузки

Иногда нужно добавить новый блок на страницу или удалить старый. Для этого есть методы createElement, appendChild, removeChild и современные append, prepend, remove.

// Создаём новый параграф
let newP = document.createElement('p');
newP.textContent = 'Это новый абзац';
// Добавляем в конец body
document.body.appendChild(newP);

// Удаляем элемент
let old = document.querySelector('.old');
old.remove(); // Современный способ
// Или через родителя:
// old.parentNode.removeChild(old);

Если нужно вставить в определённое место, используйте insertBefore или insertAdjacentHTML. Последний удобен, когда нужно вставить HTML-строку рядом с элементом.

let ref = document.querySelector('.reference');
ref.insertAdjacentHTML('afterend', '<p>После ссылки</p>');
Лайфхак: Если вы часто создаёте однотипные элементы, напишите функцию-фабрику. Она принимает параметры (тег, класс, текст) и возвращает готовый узел. Это сократит код и сделает его чище.

Что в итоге

DOM-дерево — это не страшно. Это просто структура, которую JavaScript может менять по вашему желанию. Найдите элемент через querySelector, измените его текст или стиль, повесьте обработчик события, и страница оживёт. Главное — помнить про безопасность (не используйте innerHTML с чужими данными) и про производительность (не делайте много операций с DOM в цикле, лучше собирайте изменения в документе-фрагменте).

Теперь вы знаете достаточно, чтобы начать экспериментировать. Откройте консоль любого сайта и попробуйте поменять заголовок. Это весело и познавательно.

Студия WNDER