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.