DOM tree

DOM — живой объектный граф, представляющий разобранный документ. Elements, text nodes, attributes и document fragments дают API для поиска, обхода, мутаций и измерений. Это не исходная HTML-строка и не финальное accessibility tree; мутации могут запустить работу рендеринга позже в том же кадре.

					const list = document.querySelector('[data-list]');
const item = document.createElement('li');
item.textContent = 'Новая строка'; // безопаснее innerHTML для простого текста
list.append(item);
				

Attributes относятся к разметке; properties отражают живое состояние объекта (например `value` у полей ввода). Чтение layout-свойств после записи может синхронно завершить style и layout.

На интервью: объясните, как селекторы, типы узлов, attributes vs properties и DOM-мутации связаны со стоимостью рендеринга.

Типовые ошибки: безобидный вид innerHTML и XSS; чередование записей DOM с измерениями вызывает layout.

Компромисс: удобная вставка HTML против безопасных text API и батчинга обновлений.

Чеклист:

• Отделяйте исходный HTML от живого DOM.
• Знайте nodes, elements и document fragments.
• Батчите мутации; не чередуйте read и write.
• Избегайте небезопасной HTML-инъекции.