🖥 DOM Mutation Observer

Mutation Observer — это интерфейс, позволяющий отслеживать изменения в DOM, такие как добавление или удаление элементов, изменение атрибутов или текста. Он предоставляет более эффективный способ наблюдать за изменениями, чем старые методы вроде Mutation Events, так как не блокирует поток выполнения и может отслеживать сразу несколько изменений.

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

Создание Mutation Observer

Создать Mutation Observer можно с помощью конструктора MutationObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (`MutationRecord`), описывающих изменения.

const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    console.log(mutation);
  });
});

Каждый объект `mutation` в `mutationsList` содержит информацию о произошедшем изменении, включая:
- `type` — тип изменения (`childList`, `attributes`, или `characterData`);
- `target` — целевой элемент, где произошло изменение;
- `addedNodes` и `removedNodes` — список добавленных или удаленных узлов, если `type` — `childList`;
- `attributeName` — имя измененного атрибута, если `type` — `attributes`.

Начало наблюдения

Чтобы начать наблюдение, нужно использовать метод observe и указать целевой элемент и параметры наблюдения.

const targetNode = document.getElementById('targetElement');
observer.observe(targetNode, {
  childList: true, // следить за добавлением и удалением дочерних элементов
  attributes: true, // следить за изменением атрибутов
  characterData: true, // следить за изменением текстового содержимого
  subtree: true // отслеживать изменения во всех потомках
});

Остановка наблюдения

Когда больше не нужно отслеживать изменения, можно остановить наблюдение с помощью метода disconnect():

observer.disconnect();

Полезные параметры конфигурации
- `childList`: отслеживает добавление и удаление дочерних элементов.
- `attributes`: отслеживает изменения атрибутов у целевого элемента.
- `characterData`: отслеживает изменения текстового содержимого.
- `subtree`: если установлено в `true`, позволяет отслеживать изменения не только у целевого элемента, но и у всех его потомков.

#javascript #observer