Що таке DOM?
Зрозумій, як JavaScript взаємодіє з HTML-сторінкою
DOM = дерево HTML
Уяви HTML-сторінку як дерево: є корінь (html), гілки (head, body), листочки (p, div, button...). DOM (Document Object Model) — це те, як JavaScript 'бачить' це дерево і може його змінювати. Кожен тег — вузол дерева. Можна знайти будь-який вузол і змінити його: текст, стиль, атрибути.
Як знайти елемент на сторінці
Є кілька способів вибрати елемент:
| Метод | Що шукає | Повертає |
|---|---|---|
getElementById('id') | Елемент з конкретним id | Один елемент або null |
querySelector('.class') | Перший що підходить під CSS-селектор | Один елемент або null |
querySelectorAll('p') | Всі що підходять | NodeList (схожий на масив) |
querySelector найгнучкіший — приймає будь-який CSS-селектор:
document.querySelector('#header') // за id
document.querySelector('.btn-primary') // за класом
document.querySelector('input[type=text]') // за атрибутомgetElementById і querySelector — найчастіші методи. querySelectorAll повертає NodeList, не масив — але у нього є forEach.
Зміна вмісту елемента
const el = document.querySelector('h1');
// textContent — тільки текст (безпечно)
el.textContent = 'Новий заголовок';
// innerHTML — HTML-розмітка (обережно з XSS!)
el.innerHTML = '<span style="color:red">Червоний текст</span>';
// value — для полів вводу (<input>, <textarea>)
const input = document.querySelector('input');
console.log(input.value); // прочитати що ввів юзер
input.value = ''; // очистити полеКоли що використовувати:
textContent— для звичайного тексту (назви, лічильники, повідомлення)innerHTML— тільки якщо треба вставити HTML, і ти контролюєш вмістvalue— для<input>,<textarea>,<select>
classList — зручніший за style для CSS-змін. Одна функція toggle замінює if/else для перемикання.
Завжди перевіряй що елемент існує перед зверненням до нього: if (el) { el.textContent = '...'; }. Якщо елемент не знайдено — getElementById і querySelector повертають null, і наступний рядок кине TypeError.