> Что такое Mutation Observer и для чего он нужен? (JavaScript)

Mutation Observer - это встроенный API браузера, который позволяет отслеживать изменения в DOM-дереве. Он нужен для реактивного реагирования на динамические изменения структуры, атрибутов или текстового содержимого элементов без необходимости использовать устаревшие методы вроде Mutation Events или постоянного опроса (polling).

Основные сценарии использования:

• Мониторинг добавления/удаления дочерних узлов (например, для ленивой загрузки или кастомного рендеринга).
• Отслеживание изменений атрибутов (например, для синхронизации состояния UI с данными).
• Реагирование на изменение текста в элементе (например, для автосохранения в редакторе).

Пример кода:

JAVASCRIPT
const targetNode = document.getElementById('myElement');
const config = { childList: true, subtree: true, attributes: true };

const callback = (mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('Добавлены/удалены узлы:', mutation.addedNodes, mutation.removedNodes);
    } else if (mutation.type === 'attributes') {
      console.log('Изменён атрибут:', mutation.attributeName);
    }
  }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// Позже, когда наблюдение больше не нужно:
observer.disconnect();

Mutation Observer эффективен, так как работает асинхронно и не блокирует основной поток, а также позволяет группировать изменения в один коллбэк.