MutationObserver

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

Конструктор

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

Параметры

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

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

disconnect() (en-US)
Прекращает получение уведомлений об изменении DOM-элемента экземпляром MutationObserver, до того момента пока не будет вызван метод observe().
observe() (en-US)
Подписывает экземпляр MutationObserver на получение уведомлений о манипуляциях с DOM-элементом.
takeRecords() (en-US)
Возвращает текущий 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

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();

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

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

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

BCD tables only load in the browser

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