MutationObserver

MutationObserver fornece aos desenvolvedores uma maneira de reagir a mudanças em um DOM. Ele é concebido como um substituto para Mutation Events definido na especificação de eventos DOM nível 3.

Constructor

MutationObserver()

Construtor para instanciar novos observadores de mutação do DOM.

MutationObserver(
  function callback
);

Parâmetros

callback

A função que será chamada em cada mutação do DOM. O observador irá chamar esta função com dois argumentos. O primeiro é um array de objetos, cada um do tipo MutationRecord. O segundo é a essa instância MutationObserver.

Métodos da instância

observe()

Registra a instância MutationObserver para receber notificações das mutações do DOM no nó especificado.

void observe(
  Node target,
  MutationObserverInit options
);

Parâmetros

target

O Node no qual é observadas as mutações do DOM.

options

Um objeto MutationObserverInit especifica quais mutações DOM devem ser reportadas.

disconnect()

Pára o rebimento de notificações das mutações do DOM na instância MutationObserver. O callback do observador não será invocado até que método observe() seja novamente utilizado.

void disconnect();

takeRecords()

Esvazia a fila de registro da instância MutationObserver e retorna o que estava nela.

Array takeRecords();

Valor de retorno

Retorna um Array de MutationRecords.

MutationObserverInit

MutationObserverInit é um objeto que pode especificar as seguintes propriedades:

MutationRecord

MutationRecord é um objeto que será passado para o callback do observador. Tem as seguintes propriedades:

Exemplo de uso

O exemplo a seguir foi retirado deste post.

// seleciona o nó alvo
var target = document.querySelector('#some-id');
 
// cria uma nova instância de observador
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// configuração do observador:
var config = { attributes: true, childList: true, characterData: true };
 
// passar o nó alvo, bem como as opções de observação
observer.observe(target, config);
 
// mais tarde você pode parar de observar
observer.disconnect();

Leitura adicional

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein
• The mutation summary library
• The DOM standard que define a interface do MutationObserver

Compatibilidade de browser