DOM (Document Object Model)

Дерево вузлів

html
├── head
│   └── title
└── body
    ├── h1
    └── p

Основні операції

// Знайти елемент
const el = document.querySelector('.card');

// Змінити контент
el.textContent = 'Hello';

// Додати клас
el.classList.add('active');

// Обробник події
el.addEventListener('click', () => console.log('clicked'));

// Створити елемент
const btn = document.createElement('button');
document.body.appendChild(btn);

Virtual DOM

React та інші фреймворки будують Virtual DOM — легку копію DOM у пам'яті. При змінах порівнюють нове і старе дерево (diffing) і оновлюють лише ті вузли, що змінились. Це швидше за пряму маніпуляцію DOM.