Czym jest DOM?
Zrozum jak JavaScript współdziała ze stroną HTML
DOM = drzewo HTML
Wyobraź sobie stronę HTML jako drzewo: jest korzeń (html), gałęzie (head, body), liście (p, div, button...). DOM (Document Object Model) to sposób w jaki JavaScript 'widzi' to drzewo i może je modyfikować.
Як знайти елемент на сторінці
Є кілька способів вибрати елемент:
| Метод | Що шукає | Повертає |
|---|---|---|
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.