MutationObserver

Конструктор

MutationObserver()

Создаёт и возвращает новый MutationObserver, который вызовет определённую колбэк-функцию при изменении в DOM.

Параметры

callback

Вызывается при каждом изменении DOM-элемента. Наблюдатель вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord, вторым аргументом является экземпляр MutationObserver.

Методы экземпляра

disconnect()

Прекращает получение уведомлений об изменении DOM-элемента экземпляром MutationObserver, до того момента пока не будет вызван метод observe().

observe()

Подписывает экземпляр MutationObserver на получение уведомлений о манипуляциях с DOM-элементом.

takeRecords()

Возвращает текущий Array очереди экземпляра MutationObserver, затем очищает её.

MutationObserverInit

MutationObserverInit — объект, который может содержать следующие свойства:

Mutation Observer & customize resize event listener & demo

https://codepen.io/webgeeker/full/YjrZgg/

Пример использования

Приведённый ниже пример взят из этого блога.

// Выбираем целевой элемент
var target = document.getElementById("some-id");

// Конфигурация observer (за какими изменениями наблюдать)
const config = {
  attributes: true,
  childList: true,
  subtree: true,
};

// Колбэк-функция при срабатывании мутации
const callback = function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log("The " + mutation.attributeName + " attribute was modified.");
    }
  }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(target, config);

// Позже можно остановить наблюдение
observer.disconnect();

Спецификации

Совместимость с браузерами

Смотрите также

• PerformanceObserver
• ResizeObserver
• IntersectionObserver
• Краткий обзор
• Более детальное обсуждение
• Скринкаст от разработчика Chromium Rafael Weinstein