DOM та селектори

JavaScript DOM — взаємодія з елементами веб-сторінки

У попередніх блоках ми писали JavaScript, який працював тільки з console.log. Тепер навчимося змінювати HTML-сторінку з JavaScript — додавати текст, змінювати стилі, реагувати на дії користувача. Для цього потрібно зрозуміти DOM.

Що таке DOM?

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

Коли браузер завантажує HTML, він створює DOM — JavaScript-об'єкт document, через який можна читати та змінювати будь-яку частину сторінки.

DOM-дерево: HTML перетворюється на дерево обʼєктів

Кожен HTML-тег стає вузлом (node) у дереві. JavaScript може читати, змінювати, додавати та видаляти ці вузли.

Пошук елементів

querySelector — знайти перший

Знаходить перший елемент за CSS-селектором:

// За тегом
const heading = document.querySelector("h1");

// За класом
const card = document.querySelector(".card");

// За id
const header = document.querySelector("#header");

// Вкладений селектор
const navLink = document.querySelector("nav a");

// За атрибутом
const emailInput = document.querySelector('input[type="email"]');

querySelectorAll — знайти всі

Повертає колекцію (NodeList) всіх відповідних елементів:

const allCards = document.querySelectorAll(".card");

console.log(allCards.length); // кількість знайдених

// Перебір
allCards.forEach((card) => {
  console.log(card.textContent);
});

getElementById — по id

const header = document.getElementById("header");
// Те саме, що querySelector("#header"), але трохи швидше

Порівняння методів

Робота з текстом

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

// Читання
console.log(heading.textContent); // весь текст (включаючи дочірні)
console.log(heading.innerText);   // видимий текст

// Зміна
heading.textContent = "Новий заголовок";

innerHTML — HTML-вміст

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

// Читання HTML
console.log(container.innerHTML); // "<h1>Привіт</h1><p>Текст</p>"

// Зміна HTML
container.innerHTML = "<h2>Оновлено!</h2><p>Новий контент</p>";

Робота з атрибутами

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

// Читання
console.log(link.getAttribute("href")); // "/about"
console.log(link.href);                 // повний URL

// Зміна
link.setAttribute("href", "/contacts");
link.setAttribute("target", "_blank");

// Видалення
link.removeAttribute("target");

// Перевірка
console.log(link.hasAttribute("href")); // true

Робота зі стилями

Inline-стилі через style

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

box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";
box.style.borderRadius = "8px"; // CSS: border-radius → JS: borderRadius

Класи через classList

const button = document.querySelector(".btn");

button.classList.add("active");        // додати клас
button.classList.remove("active");     // видалити
button.classList.toggle("active");     // додати якщо немає, видалити якщо є
button.classList.contains("active");   // перевірити: true/false

Навігація по DOM-дереву

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

// Батько
item.parentElement;

// Дочірні
item.children;          // тільки елементи
item.firstElementChild;
item.lastElementChild;

// Сусіди
item.nextElementSibling;
item.previousElementSibling;

Практика

<div id="app">
  <h1 class="title">Привіт, DOM!</h1>
  <p class="description">Це параграф.</p>
  <button class="btn">Натисни мене</button>
</div>

// 1. Знайти та змінити заголовок
const title = document.querySelector(".title");
title.textContent = "Привіт, JavaScript!";
title.style.color = "#3182ce";

// 2. Додати клас
const btn = document.querySelector(".btn");
btn.classList.add("primary");

// 3. Змінити атрибут
btn.setAttribute("disabled", "true");

Підсумок

• DOM — об'єктне представлення HTML-сторінки
• querySelector — знайти перший елемент за CSS-селектором
• querySelectorAll — знайти всі елементи
• textContent — безпечна робота з текстом
• innerHTML — зміна HTML (обережно з XSS!)
• classList — додавання/видалення CSS-класів (краще за style)
• getAttribute/setAttribute — робота з атрибутами

Що далі?

У наступному уроці вивчимо маніпуляцію DOM — створення, додавання та видалення елементів.