MutationObserver: изменения структуры и атрибутов DOM

Назначение

MutationObserver наблюдает за изменениями выбранного поддерева DOM. Он полезен, когда нужно реагировать на добавление узлов или изменение атрибутов, но прямого события от компонента нет.

Как это работает

Пример создаёт отдельный контейнер в собственной учебной странице. Наблюдаются дочерние узлы и только атрибут data-state. Уведомления доставляются асинхронно, поэтому несколько изменений могут оказаться в одном callback.

Пример

const box = document.createElement("section");
document.body.append(box);
const observer = new MutationObserver(records => {
  console.log(records.map(record => record.type));
});
observer.observe(box, {childList:true, attributes:true, attributeFilter:["data-state"]});
box.append(document.createElement("p"));
box.dataset.state = "ready";
function disposeObservation() {
  observer.disconnect();
  box.remove();
}

Что должно получиться

После добавления абзаца и изменения атрибута приходит информация о childList и attributes. Порядок вызовов вашего кода и доставки уведомлений различается: callback не выполняется прямо внутри append.

Граница применения и частая ошибка

Не меняйте наблюдаемый атрибут безусловно в каждом callback: это может создать цикл новых уведомлений. Для изменения размеров есть ResizeObserver, а для видимости — другие API. Наблюдение за всем document с множеством опций часто избыточно.

Самостоятельная проверка

Добавьте изменение неуказанного атрибута и проверьте фильтр. После получения первого сообщения вызовите disposeObservation. Учтите, что disconnect может отбросить ещё не доставленные записи; при необходимости изучите takeRecords.

Связанные материалы

• Коллекции DOM
• Очистка обработчиков
• Безопасное обновление страницы