DOM-дерево: Як JavaScript керує сторінкою

Коли веб-сторінка завантажується, браузер створює її об’єктну модель — DOM (Document Object Model). Завдяки DOM, JavaScript отримує повну владу над HTML. Він може додавати, видаляти або змінювати будь-які елементи на сторінці в режимі реального часу, реагуючи на дії користувача (кліки, введення тексту).

Саме завдяки роботі з DOM ми бачимо спливаючі вікна, динамічні меню та оновлення коментарів без перезавантаження сторінки.

Приклад використання:

JavaScript

// Знаходимо кнопку на сторінці за її ID
const button = document.getElementById("myButton");

// Змінюємо текст всередині кнопки
button.textContent = "Натисни мене!";

// Додаємо дію при кліку на кнопку
button.addEventListener("click", () => {
  alert("Кнопку натиснуто!");
});

Детальніше: https://www.youtube.com/watch?v=EezTqYPDWto