MutationObserver

MutationObserver предоставляет возможность получать уведомления об изменении определённых DOM-элементов. MutationObserver является заменой Mutation Events, определённой в спецификации DOM3 Events.

Конструктор

MutationObserver()

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

Параметры

callback

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

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

disconnect()

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

observe()

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

takeRecords()

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

MutationObserverInit

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

Примечание: Так или иначе необходимо установить true для одного из следующих свойств: childList, attributes, characterData. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"

Property Description
childList true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))
attributes true, если необходимо наблюдать за изменениями атрибутов целевого элемента.
characterData true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).
subtree true, если необходимо наблюдать за потомками целевого элемента.
attributeOldValue true, если необходимо возвращать предыдущее значение атрибута.
characterDataOldValue true, если необходимо возвращать предыдущее значение Data атрибута.
attributeFilter Устанавливает массив названий атрибутов (без указания пространства имён), если требуется наблюдать за изменениями конкретных атрибутов.

Mutation Observer & customize resize event listener & demo

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

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

js
// Выбираем целевой элемент
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();

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

Specification
DOM Standard
# interface-mutationobserver

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

BCD tables only load in the browser

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