DOM

С возвращением.

В предыдущем уроке ты познакомился с объектами.

Объекты помогают JavaScript хранить структурированные данные.

Очень полезно.

Очень серьёзно.

Очень дружелюбно к фигурным скобкам.

Сегодня мы подходим ещё ближе к настоящей веб-разработке.

Мы изучаем DOM.

DOM означает Document Object Model.

Звучит очень официально.

Почти как что-то, написанное комитетом в комнате с плохим кофе.

Но идея простая.

DOM — это способ, которым JavaScript видит твою HTML-страницу.

Благодаря DOM JavaScript может:

читать элементы;
изменять текст;
изменять стили;
создавать новые элементы;
удалять элементы;
реагировать на действия пользователя.

Без DOM JavaScript в основном живёт в консоли.

С DOM JavaScript может трогать страницу.

Осторожно.

Обычно.

Что Ты Изучишь

В этом уроке ты изучишь:

что такое DOM;
как JavaScript видит HTML как объекты;
как выбирать элементы через getElementById;
как выбирать элементы через querySelector;
как изменять текст;
как изменять стили;
как изменять классы;
как создавать элементы;
как добавлять элементы на страницу;
как удалять элементы;
как создать маленькую панель сообщений.

В конце этого урока ты поймёшь, как JavaScript общается с веб-страницей.

Это большой шаг.

Раньше JavaScript в основном разговаривал сам с собой в консоли.

Теперь он начинает разговаривать со страницей.

Как разработчик, который наконец вышел из терминала и увидел солнечный свет.

На минутку.

Потом вернулся в терминал.

Что Такое DOM?

DOM — это представление твоей HTML-страницы.

Когда браузер загружает HTML, он создаёт структуру, которую JavaScript может использовать.

Пример HTML:

<h1>Привет</h1>
<p>Добро пожаловать в JavaScript.</p>

Браузер превращает это во что-то, что JavaScript может читать и изменять.

Потом JavaScript может сделать так:

document.querySelector("h1").textContent = "Привет от JavaScript!";

Страница меняется.

Магия?

Нет.

DOM.

Лучше магии.

Потому что это можно дебажить.

В основном.

HTML Становится Объектами

DOM означает Document Object Model.

Самое важное слово здесь — object.

Браузер воспринимает HTML-элементы как объекты.

Например, этот HTML-элемент:

<h1 id="title">JavaScript</h1>

можно получить в JavaScript:

const titleElement = document.getElementById("title");

Теперь titleElement — это JavaScript-объект, который представляет этот HTML-элемент.

Ты можешь его читать.

Изменять.

Стилизовать.

Перемещать.

Заставлять страдать.

Но, пожалуйста, не надо.

Используй свою силу ответственно.

Создай Проект

Создай папку для этого урока:

mkdir javascript-lesson7
cd javascript-lesson7
touch index.html
touch script.js

Твой проект должен выглядеть так:

javascript-lesson7/
  index.html
  script.js

Открой папку в редакторе.

Сегодня мы работаем прямо с веб-страницей.

Консоль всё ещё полезна.

Но теперь страница тоже будет меняться.

Наконец-то видимые результаты.

Браузер эмоционально готовится.

Напиши HTML

Открой index.html и добавь:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
</head>
<body>
  <h1 id="mainTitle">DOM</h1>
  <p id="description">JavaScript может изменить этот текст.</p>

  <script src="script.js"></script>
</body>
</html>

Открой файл в браузере.

Потом открой script.js.

Мы готовы управлять страницей.

Не всем интернетом.

Только этой страницей.

Остаёмся скромными.

Выбор Элемента с Помощью getElementById

Метод getElementById находит элемент по его id.

Пример:

const titleElement = document.getElementById("mainTitle");

console.log(titleElement);

Обнови браузер и открой консоль.

Ты должен увидеть элемент <h1>.

Эта строка:

document.getElementById("mainTitle")

означает:

“Найди элемент с id mainTitle.”

id в HTML выглядит так:

<h1 id="mainTitle">DOM</h1>

JavaScript его находит.

Сохраняет в переменную.

Теперь мы можем с ним работать.

Как маленькие механики веба.

С меньшим количеством инструментов.

И большим количеством точек с запятой.

Изменение Текста с Помощью textContent

Теперь изменим текст.

Добавь это в script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.textContent = "JavaScript Изменил Этот Заголовок";

Обнови браузер.

Заголовок должен измениться.

Оригинальный HTML:

<h1 id="mainTitle">DOM</h1>

Но JavaScript меняет его на:

JavaScript Изменил Этот Заголовок

Это важно.

HTML-файл всё ещё содержит старый текст.

Но страница в браузере показывает новый текст, потому что JavaScript изменил DOM.

JavaScript не переписал твой файл.

Он изменил страницу в браузере.

Как надеть шляпу на статую.

Статуя та же.

Но теперь выглядит иначе.

Выбор с Помощью querySelector

Есть ещё один очень популярный способ выбирать элементы:

document.querySelector()

Пример:

const descriptionElement = document.querySelector("#description");

descriptionElement.textContent = "DOM теперь под контролем JavaScript.";

#description означает:

“Найди элемент с id description.”

Так же, как в CSS.

Потому что querySelector использует CSS-селекторы.

Примеры:

document.querySelector("h1");
document.querySelector("#mainTitle");
document.querySelector(".card");

Это делает querySelector очень гибким.

Если ты знаешь CSS-селекторы, ты уже знаешь, как находить элементы.

Поздравляю.

Твои знания CSS зашли в JavaScript-зал.

getElementById или querySelector?

Оба способа могут выбирать элементы.

Пример с getElementById:

const title = document.getElementById("mainTitle");

Пример с querySelector:

const title = document.querySelector("#mainTitle");

Оба работают.

Простое правило:

Используй getElementById, когда выбираешь элемент по id.

Используй querySelector, когда хочешь больше гибкости.

Для начинающих оба варианта нормальны.

Не начинаем религиозную войну из-за этого.

В программировании и так достаточно драмы.

Изменение Стилей с Помощью JavaScript

Ты также можешь изменять стили.

Пример:

const titleElement = document.getElementById("mainTitle");

titleElement.style.color = "blue";
titleElement.style.fontSize = "48px";

Обнови браузер.

Заголовок станет синим и больше.

JavaScript может напрямую изменять CSS-стили.

Но будь осторожен.

Если положить слишком много стилей в JavaScript, код может стать беспорядочным.

Обычно CSS должен отвечать за стили.

JavaScript должен добавлять или удалять классы.

Так чище.

Как использовать правильные инструменты вместо того, чтобы чинить всё скотчем.

Хотя скотч иногда имеет силу.

Изменение Классов

Используем классы вместо прямых стилей.

Обнови index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>

  <style>
    .highlight {
      color: white;
      background-color: #2563eb;
      padding: 12px 18px;
      border-radius: 12px;
    }
  </style>
</head>
<body>
  <h1 id="mainTitle">DOM</h1>
  <p id="description">JavaScript может изменить этот текст.</p>

  <script src="script.js"></script>
</body>
</html>

Теперь обнови script.js:

const titleElement = document.getElementById("mainTitle");

titleElement.classList.add("highlight");

Обнови браузер.

Класс добавляется.

Стиль появляется.

Это очень распространённый шаблон:

element.classList.add("class-name");

Также можно удалить класс:

element.classList.remove("highlight");

Или переключать класс:

element.classList.toggle("highlight");

toggle означает:

если класс есть, удали его;
если класса нет, добавь его.

Очень полезно.

Очень элегантно.

Почти подозрительно.

Создание Элементов

JavaScript может создавать новые HTML-элементы.

Пример:

const newParagraph = document.createElement("p");

newParagraph.textContent = "Этот абзац создал JavaScript.";

console.log(newParagraph);

Это создаёт абзац.

Но он ещё не появляется на странице.

Почему?

Потому что создать элемент — это не то же самое, что добавить его на страницу.

Ты его создал.

Теперь нужно его подключить.

Как собрать полку и вспомнить, что она всё ещё лежит на полу.

Добавление Элементов на Страницу

Чтобы добавить элемент на страницу, используй appendChild.

Пример:

const newParagraph = document.createElement("p");
newParagraph.textContent = "Этот абзац создал JavaScript.";

document.body.appendChild(newParagraph);

Обнови браузер.

Теперь абзац появляется.

Эта строка:

document.body.appendChild(newParagraph);

означает:

“Добавь этот новый абзац внутрь body.”

Очень полезно.

Так JavaScript может создавать динамический контент.

Задачи.

Сообщения.

Карточки.

Товары.

Случайные предупреждения.

Обычная жизнь веб-разработчика.

Удаление Элементов

Ты также можешь удалять элементы.

Пример:

const descriptionElement = document.getElementById("description");

descriptionElement.remove();

Обнови браузер.

Абзац исчезает.

JavaScript удалил его из DOM.

И снова: оригинальный HTML-файл не изменяется.

Меняется только страница в браузере.

DOM временный.

Как мотивация после длинного сообщения об ошибке.

Но мы идём дальше.

innerHTML

Есть ещё свойство innerHTML.

Оно позволяет вставлять HTML как строку.

Пример:

const descriptionElement = document.getElementById("description");

descriptionElement.innerHTML = "<strong>Теперь этот текст жирный.</strong>";

Это работает.

Но будь осторожен.

Если вставлять данные пользователя в innerHTML, это может быть опасно.

Почему?

Потому что HTML может содержать скрипты.

А скрипты могут создать проблемы безопасности.

Пока простое правило:

Используй textContent для текста.

Используй innerHTML только тогда, когда действительно нужен HTML.

Не вставляй случайные данные пользователя в innerHTML.

Баги безопасности не милые.

Они не приносят кофе.

Создай Панель Сообщений

Теперь создадим маленькую панель сообщений.

Обнови index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
      margin-right: 8px;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }

    .warning {
      background-color: #fffbeb;
      border-color: #fde68a;
      color: #92400e;
    }
  </style>
</head>
<body>
  <h1>DOM</h1>

  <div class="card">
    <p id="message" class="message">Нажми кнопку, чтобы изменить это сообщение.</p>

    <button id="successButton">Показать Успех</button>
    <button id="warningButton">Показать Предупреждение</button>
    <button id="clearButton">Очистить</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

Теперь обнови script.js:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

function showSuccessMessage() {
  messageElement.textContent = "Успех! DOM был обновлён.";
  messageElement.className = "message success";
}

function showWarningMessage() {
  messageElement.textContent = "Предупреждение! JavaScript трогает страницу.";
  messageElement.className = "message warning";
}

function clearMessage() {
  messageElement.textContent = "Нажми кнопку, чтобы изменить это сообщение.";
  messageElement.className = "message";
}

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

Обнови браузер.

Нажми кнопки.

Сообщение меняется.

Стиль меняется.

Страница реагирует.

Это DOM в действии.

JavaScript больше не просто говорит.

Он действует.

Опасно.

Но красиво.

Как Работает Этот Код

Эти строки находят элементы:

const messageElement = document.getElementById("message");
const successButton = document.getElementById("successButton");
const warningButton = document.getElementById("warningButton");
const clearButton = document.getElementById("clearButton");

Эта функция показывает сообщение успеха:

function showSuccessMessage() {
  messageElement.textContent = "Успех! DOM был обновлён.";
  messageElement.className = "message success";
}

Эта функция показывает предупреждение:

function showWarningMessage() {
  messageElement.textContent = "Предупреждение! JavaScript трогает страницу.";
  messageElement.className = "message warning";
}

Эта функция сбрасывает сообщение:

function clearMessage() {
  messageElement.textContent = "Нажми кнопку, чтобы изменить это сообщение.";
  messageElement.className = "message";
}

Эти строки подключают кнопки к функциям:

successButton.addEventListener("click", showSuccessMessage);
warningButton.addEventListener("click", showWarningMessage);
clearButton.addEventListener("click", clearMessage);

Это очень важный шаблон:

Пользователь нажимает.

Функция запускается.

DOM меняется.

Страница обновляется.

Это frontend development в одном маленьком бутерброде.

Типичные Ошибки

Забыть # в querySelector

Неправильно:

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

Правильно:

const title = document.querySelector("#mainTitle");

Если выбираешь id через querySelector, используй #.

Так же, как в CSS.

Без # JavaScript ищет элемент с названием <mainTitle>.

Которого, скорее всего, не существует.

Разве что твой HTML стал очень творческим.

Пытаться Изменить Элемент, Которого Ещё Нет

Если скрипт запускается до того, как HTML загрузился, JavaScript может не найти элемент.

Поэтому мы часто ставим это в конце body:

<script src="script.js"></script>

После HTML-элементов.

Хорошо.

Просто.

Меньше драмы.

Использовать textContent, Когда Нужен HTML

Это:

element.textContent = "<strong>Привет</strong>";

покажет текст именно так:

<strong>Привет</strong>

Он не сделает текст жирным.

Для HTML используй:

element.innerHTML = "<strong>Привет</strong>";

Но помни:

Используй innerHTML осторожно.

Он мощный.

А мощные вещи могут создавать мощную головную боль.

Использовать className и Случайно Удалить Все Классы

Это:

messageElement.className = "success";

заменяет все классы.

Если элемент имел:

<p class="message"></p>

теперь он имеет только:

<p class="success"></p>

Это может сломать стили.

Поэтому мы использовали:

messageElement.className = "message success";

Потому что хотим сохранить оба класса.

Детали важны.

CSS смотрит.

Практика

Создай страницу с:

заголовком;
абзацем;
кнопкой.

Когда кнопку нажимают:

измени текст заголовка;
измени текст абзаца;
добавь класс к абзацу.

Пример HTML:

<h1 id="title">Старый Заголовок</h1>
<p id="text">Старый текст.</p>
<button id="changeButton">Изменить</button>

Пример JavaScript:

const titleElement = document.getElementById("title");
const textElement = document.getElementById("text");
const changeButton = document.getElementById("changeButton");

function changeContent() {
  titleElement.textContent = "Новый Заголовок";
  textElement.textContent = "Этот абзац изменил JavaScript.";
  textElement.classList.add("highlight");
}

changeButton.addEventListener("click", changeContent);

Запусти это.

Измени это.

Сломай это.

Почини это.

DOM становится легче только через практику.

Он не станет легче, если просто смотреть на него.

К сожалению.

Я пробовал.

Мини-Челлендж

Создай маленькое поле сообщений.

Страница должна содержать:

заголовок;
место для сообщения;
кнопку “Показать Info”;
кнопку “Показать Ошибку”;
кнопку “Reset”.

Когда пользователь нажимает “Показать Info”:

Показано информационное сообщение.

Когда пользователь нажимает “Показать Ошибку”:

Что-то пошло не так.

Когда пользователь нажимает “Reset”:

Сообщений пока нет.

Используй классы, чтобы менять стиль.

Например:

.info {
  background-color: #eff6ff;
}

.error {
  background-color: #fef2f2;
}

Этот челлендж очень близок к реальной работе.

Сайты постоянно показывают сообщения.

Успех.

Предупреждения.

Ошибки.

Формы.

Уведомления.

Маленькие коробки эмоционального ущерба.

DOM обрабатывает их все.

Итог

Сегодня ты изучил:

DOM — это способ, которым JavaScript видит веб-страницу;
HTML-элементы становятся объектами, которые JavaScript может использовать;
getElementById выбирает элементы по id;
querySelector выбирает элементы по CSS-селекторам;
textContent изменяет текст;
style может напрямую изменять CSS;
classList может добавлять, удалять или переключать классы;
createElement создаёт новые элементы;
appendChild добавляет элементы на страницу;
remove удаляет элементы;
innerHTML может вставлять HTML, но его нужно использовать осторожно;
события могут запускать изменения в DOM.

Это огромный шаг.

DOM — это место, где JavaScript становится видимым.

До DOM JavaScript — это логика.

С DOM JavaScript становится взаимодействием.

Кнопки.

Сообщения.

Карточки.

Меню.

Формы.

Всё начинается здесь.

Страница больше не просто сидит неподвижно.

Она живая.

Немного драматичная.

Но живая.

Следующий Урок

В следующем уроке мы изучим события.

События — это способ, которым JavaScript реагирует на пользователей.

Клики.

Ввод текста.

Отправка форм.

Движение мыши.

Нажатие клавиш.

Короче говоря, события — это способ, которым браузер говорит:

“Что-то произошло.”

А JavaScript отвечает:

“У меня есть функция для этого.”