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 для одного из следующих cвойств: 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

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

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

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

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

Спецификация Статус Комментарий
DOM
Определение 'MutationObserver' в этой спецификации.
Живой стандарт
DOM4
Определение 'MutationObserver' в этой спецификации.
Устаревшая

Поддержка браузерами

BCD tables only load in the browser

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