JavaScript та DOM

DOM: пошук та читання елементів

📖 Теорія

DOM (Document Object Model) — деревоподібне представлення HTML-документа в браузері.

💡 Приклад коду

// Пошук одного елемента
const header = document.querySelector('h1');
const btn = document.querySelector('#submit-btn');
const card = document.querySelector('.card');
const emailInput = document.querySelector('input[type="email"]');

// Пошук кількох елементів (повертає NodeList)
const items = document.querySelectorAll('.list-item');
const allLinks = document.querySelectorAll('nav a');

// Старі методи (ще часто зустрічаються)
document.getElementById('myId')
document.getElementsByClassName('myClass')  // HTMLCollection
document.getElementsByTagName('p')

// Читання властивостей
element.textContent   // текст без HTML
element.innerHTML     // HTML-контент
element.value         // значення input/textarea
element.id            // атрибут id
element.className     // атрибут class
element.getAttribute('href')
element.dataset.userId  // data-user-id атрибут

Вивід:

← Попередній урок Наступний урок →