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="uk">
<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="uk">
<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="uk">
<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 відповідає:

“У мене є функція для цього.”