MutationObserver.MutationObserver()

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

El constructor DOM MutationObserver() — parte del interface MutationObservercrea y devuelve un nuevo objeto observer que llamará a la función especificada (callback), cuando tengan lugar cambios sobre el DOM. Estos observadores no se inician inmediatamente; en primer lugar debemos llamar al método observe() para establecer qué parte del DOM observar y que tipo de cambios comunicar.

Sintaxis

var observer = new MutationObserver(callback);

Parámetros

callback
La función que será llamada con cada cambio en el DOM, determinado por el nodo, subárbol y opciones. Esta función toma dos parámetros de entrada: un array de objetos MutationRecord, con los cambios producidos, y el MutationObserver que llamó a la función. Para mas detalles vea example
 

Valor devuelto

Un nuevo objeto MutationObserver, configurado para llamar a una determinada función cuando se producca un cambio en el DOM.

Ejemplo

Este ejemplo crea un nuevo MutationObserver configurado para observar a un nodo y a sus hijos (subárbol), cuando se añadan o eliminen elementos al mismo; tambien observa cualquier cambio en los atributos de los elementos del árbol.

La función callback

function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        /* Uno o mas hijos han sido añadidos y/o eliminados del árbol;
           vea mutation.addedNodes y mutation.removedNodes */
        break;
      case 'attributes':
        /* El valor de un atributo en mutation.target ha cambiado;
           El nombre del atributo esta en mutation.attributeName y
           su valor anterior en mutation.oldValue */   
        break;
    }
  });
}

La función callback() es llamada cuando el observer detecta cambios que coinciden con la configuración de consulta especificada cuando llamamos a observe() para que inicie la observación.

El tipo de cambio que se produjo (tanto en la lista de hijos como en los atributos) es detectado observando la propiedad mutation.type

Crear e iniciar un  "observer"

Este código establece el proceso de observación

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true,
  subtree: true //Omita o ponga false si no quiere controlar los cambios en los hijos
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

El subárbol deseado se localiza buscando un elemento cuyo ID es "someElement". Un conjunto de opciones para el "observer" es establecido en el registro observerOptions. En él, especificamos los valores true tanto para childList como attributes, para obtener la información deseada.

Posteriormente instanciamos el objeto observer, especificando la función callback(), e iniciamos la observación de los nodos del DOM llamando al método observe(), pasandole el nodo y las opciones.

Desde este momento y hasta que se llame al método disconnect(), la funcion callback() será llamada cada vez que un elemento sea añadido o eliminado del árbol del DOM, cuya raiz es  targetNode, o uno de sus atributos sea cambiado.

 

Especificaciones

Especificación Estado Comentario
DOM
La definición de 'MutationObserver()' en esta especificación.
Living Standard  

Compatibilidad

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
MutationObserver() constructorChrome Soporte completo 26
Soporte completo 26
Sin soporte 18 — 26
Prefijado
Prefijado Requiere de un prefijo de vendedor : WebKit
Edge Soporte completo SiFirefox Soporte completo 14IE Soporte completo 11Opera Soporte completo 15Safari Soporte completo 7
Soporte completo 7
Sin soporte 6 — 7
Prefijado
Prefijado Requiere de un prefijo de vendedor : WebKit
WebView Android Soporte completo Si
Soporte completo Si
Sin soporte ? — ?
Prefijado
Prefijado Requiere de un prefijo de vendedor : WebKit
Chrome Android Soporte completo 26
Soporte completo 26
Sin soporte 18 — 26
Prefijado
Prefijado Requiere de un prefijo de vendedor : WebKit
Firefox Android Soporte completo 14Opera Android Soporte completo 14Safari iOS Soporte completo 7
Soporte completo 7
Sin soporte 6 — 7
Prefijado
Prefijado Requiere de un prefijo de vendedor : WebKit
Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.