MutationObserver

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

Constructor

MutationObserver()

Конструктор, служит для создания новых наблюдателей за изменениями DOM.

new MutationObserver(
  function callback
);

Parameters

callback

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

Instance methods

observe()

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

void observe(
  Node target,
  MutationObserverInit options
);

Parameters

target

Элемент дерева DOM, изменения которого необходимо отслеживать.

options

Объект MutationObserverInit, указывающий о каких изменениях DOM-элемента должны поступать уведомления.

disconnect()

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

void disconnect();

takeRecords()

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

Array takeRecords();

Return value

Возвращает массив из MutationRecord.

MutationObserverInit

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

Example usage

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

// выбираем целевой элемент
var target = document.getElementById('some-id');
 
// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// конфигурация нашего observer:
var config = { attributes: true, childList: true, characterData: true };
 
// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);
 
// позже можно остановить наблюдение
observer.disconnect();

Additional reading

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein
• The mutation summary library

Specifications

Browser compatibility