Что такое DOM и как JavaScript управляет страницей

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

1) DOM как дерево

Любая страница в DOM - это дерево. На верхнем уровне есть объект document, внутри - элементы <html>, <head>, <body>, а дальше вложенные элементы.

Упрощенно это выглядит так:

document
- html
  - head
  - body
    - header
    - main
    - footer

Из-за такой структуры часто говорят “родитель”, “дети”, “соседи” элементов.

2) document - точка входа

В браузере document доступен глобально. Через него обычно начинают работу с DOM.

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

3) Как найти элементы на странице

Самый универсальный и популярный способ - CSS-селекторы через querySelector и querySelectorAll.

querySelector: первый найденный элемент

const title = document.querySelector("h1");
console.log(title);

querySelectorAll: все совпадения

querySelectorAll возвращает коллекцию (NodeList), ее можно перебирать через for...of.

const links = document.querySelectorAll("a");

for (const link of links) {
  console.log(link.href);
}

Селекторы по классу и id

const card = document.querySelector(".card");
const header = document.querySelector("#header");

Практичное правило: #id удобен для одного уникального элемента, .class - для группы.

4) Чтение и изменение текста

Для текста чаще используют textContent. Он работает безопасно и не интерпретирует HTML.

const title = document.querySelector("h1");

console.log(title.textContent);

title.textContent = "Новый заголовок";

innerHTML: осторожно

innerHTML вставляет HTML-разметку строкой.

const box = document.querySelector(".box");
box.innerHTML = "<strong>Жирный текст</strong>";

Если в innerHTML попадет строка из внешних данных (например, из формы или сети), есть риск XSS. Поэтому по умолчанию безопаснее textContent, а innerHTML использовать только когда действительно нужна разметка и данные контролируются.

5) Атрибуты: getAttribute и setAttribute

Атрибуты - это то, что записано в HTML: href, src, data-* и так далее.

const link = document.querySelector("a");

const href = link.getAttribute("href");
console.log(href);

link.setAttribute("href", "https://example.com");

data-атрибуты

Часто используют data-* для хранения небольших “меток” в HTML.

HTML:

<button class="btn" data-id="42">Open</button>

JavaScript:

const btn = document.querySelector(".btn");
console.log(btn.dataset.id); // "42"

dataset всегда возвращает строки.

6) Классы: classList

Классами удобно управлять через classList.

const panel = document.querySelector(".panel");

panel.classList.add("is-open");
panel.classList.remove("is-open");
panel.classList.toggle("is-open");
console.log(panel.classList.contains("is-open"));

7) Стили: style и вычисленные стили

Инлайновые стили

const box = document.querySelector(".box");

box.style.padding = "12px";
box.style.borderRadius = "12px";

Это изменяет именно inline-стиль (style=""). Обычно для дизайна удобнее переключать классы, а не писать много CSS из JS.

Вычисленные стили

const box = document.querySelector(".box");

const styles = getComputedStyle(box);
console.log(styles.fontSize);

getComputedStyle возвращает итоговый стиль с учетом CSS.

8) Создание и вставка элементов

DOM позволяет создавать элементы и добавлять их на страницу.

const list = document.querySelector(".list");

const item = document.createElement("li");
item.textContent = "Новый пункт";

list.append(item);

Вставка в начало:

const list = document.querySelector(".list");

const item = document.createElement("li");
item.textContent = "Первый пункт";

list.prepend(item);

9) Удаление элементов

const banner = document.querySelector(".banner");

banner.remove();

10) Почему иногда “ничего не работает”

Самая частая причина - скрипт выполняется раньше, чем браузер успел построить DOM. Тогда querySelector возвращает null.

const title = document.querySelector("h1");
console.log(title);

Если в консоли null, значит элемента на странице нет в момент выполнения.

Практичные варианты решения:

подключать скрипт в конце body
использовать атрибут defer у <script>
ждать событие DOMContentLoaded (тема событий будет отдельно)

Пример с DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
  const title = document.querySelector("h1");
  console.log(title);
});

Что стоит запомнить

DOM - это дерево объектов, которое браузер строит из HTML.
document - главный объект для доступа к странице.
querySelector и querySelectorAll находят элементы по CSS-селекторам.
Текст обычно меняют через textContent, HTML через innerHTML используют осторожно.
Классы удобнее менять через classList, а стили чаще через классы, а не style.
Частая причина ошибок - скрипт выполняется до построения DOM.