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

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' в этой спецификации.
Устаревшая

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
MutationObserverChrome Полная поддержка 26
Полная поддержка 26
Нет поддержки 18 — 26
С префиксом
С префиксом Требует вендорный префикс: WebKit
Edge Полная поддержка ДаFirefox Полная поддержка 14IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 7
Полная поддержка 7
Нет поддержки 6 — 7
С префиксом
С префиксом Требует вендорный префикс: WebKit
WebView Android Полная поддержка Да
Полная поддержка Да
Нет поддержки ? — ?
С префиксом
С префиксом Требует вендорный префикс: WebKit
Chrome Android Полная поддержка 26
Полная поддержка 26
Нет поддержки 18 — 26
С префиксом
С префиксом Требует вендорный префикс: WebKit
Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 7
Полная поддержка 7
Нет поддержки 6 — 7
С префиксом
С префиксом Требует вендорный префикс: WebKit
Samsung Internet Android Полная поддержка Да
MutationObserver() constructorChrome Полная поддержка 26
Полная поддержка 26
Нет поддержки 18 — 26
С префиксом
С префиксом Требует вендорный префикс: WebKit
Edge Полная поддержка ДаFirefox Полная поддержка 14IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 7
Полная поддержка 7
Нет поддержки 6 — 7
С префиксом
С префиксом Требует вендорный префикс: WebKit
WebView Android Полная поддержка Да
Полная поддержка Да
Нет поддержки ? — ?
С префиксом
С префиксом Требует вендорный префикс: WebKit
Chrome Android Полная поддержка 26
Полная поддержка 26
Нет поддержки 18 — 26
С префиксом
С префиксом Требует вендорный префикс: WebKit
Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 7
Полная поддержка 7
Нет поддержки 6 — 7
С префиксом
С префиксом Требует вендорный префикс: WebKit
Samsung Internet Android Полная поддержка Да
disconnectChrome Полная поддержка 18Edge Полная поддержка 12Firefox Полная поддержка 14IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
observeChrome Полная поддержка 18Edge Полная поддержка 12Firefox Полная поддержка 14IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да
takeRecordsChrome Полная поддержка 18Edge Полная поддержка 12Firefox Полная поддержка 14IE Полная поддержка 11Opera Полная поддержка 15Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 14Safari iOS Полная поддержка 6Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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