MutationObserver

MutationObserver establece un mecanismo para reaccionar ante cambios en el DOM. Ha sido diseñado como un sustituto de los Mutation Events definidos en las especificaciones de DOM3 Events.

Constructor

MutationObserver()

Constructor para la instaciación de nuevos DOM mutation observers.

MutationObserver(
  function callback
);

Parámetros

callback

La función que será llamada en cada mutación del DOM. El observer llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo MutationRecord. El segundo es la propia instancia del MutationObserver.

Métodos

observe()

Registra la instancia del MutationObserver  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.

void observe(
  Node target,
  MutationObserverInit options
);

Parámetros

target

El Node sobre el que observar las mutaciones del DOM.

options

Un objeto MutationObserverInit, que especifica que mutaciones del DOM deben ser informadas.

disconnect()

Evita que la instancia de MutationObserver continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método observe() sea usado de nuevo, la función callback no será invocada.

void disconnect();

takeRecords()

Vacía la cola de registros de la instancia de MutationObserver devolviendo su contenido.

Array takeRecords();

Return value

Returns an Array of MutationRecords.

MutationObserverInit

MutationObserverInit es un objeto para el que se pueden especificar las siguientes propiedades:

MutationRecord

MutationRecord es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:

Ejemplo de uso

El siguiente ejemplo fué tomado de: this blog post.

// selecciona el nodo target
var target = document.querySelector('#some-id');
 
// Crea una instancia de observer
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// Configura el observer:
var config = { attributes: true, childList: true, characterData: true };
 
// pasa al observer el nodo y la configuracion
observer.observe(target, config);
 
// Posteriormente, puede detener la observacion
observer.disconnect();

Lectura adicional

• A brief overview
• A more in-depth discussion
• A screencast by Chromium developer Rafael Weinstein
• The mutation summary library
• The DOM standard which defines the MutationObserver interface

Compatibilidad en navegadores