MutationObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

MutationObserver establece un mecanismo para reaccionar ante cambios en elDOM. Ha sido diseñado como un sustituto de losMutation Events definidos en las especificaciones deDOM3 Events.

Constructor

`MutationObserver()`

Constructor para la instaciación de nuevosDOM mutation observers.

MutationObserver(  function callback);

Parámetros

callback: La función que será llamada en cada mutación del DOM. Elobserver llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipoMutationRecord. El segundo es la propia instancia delMutationObserver.

Métodos

`void observe(Node target, MutationObserverInit options );`
`void disconnect();`
`Array takeRecords();`

`observe()`

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

void observe(Node target,  MutationObserverInit options);

Parámetros

target: ElNode sobre el que observar las mutaciones del DOM.
options: Un objeto MutationObserverInit, que especifica que mutaciones del DOM deben ser informadas.

Nota:Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.

`disconnect()`

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

void disconnect();

`takeRecords()`

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

Array takeRecords();

Return value

Returns an Array ofMutationRecords.

`MutationObserverInit`

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

Nota:Como mínimo las propiedadeschildList,attributes, ocharacterData deben sertrue. En caso contrario, se producirá un error "An invalid or illegal string was specified"

Propiedad	Descripción
`childList`	Establecer a`true` si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos`text`) han se ser observados.
`attributes`	Establecer a`true` si los cambios en los atributos deben ser observados
`characterData`	Establecer a`true` si los cambios en los datos deben ser observados
`subtree`	Establecer a`true` si los cambios tambien deben ser observados en los descendientes.
`attributeOldValue`	Establecer a`true` si`attributes` es`true` y el valor anterior al cambio debe ser guardado.
`characterDataOldValue`	Establecer a`true` si`characterData` vale`true` y el dato anterior al cambio de be ser guardado.
`attributeFilter`	Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos

`MutationRecord`

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

type:String

Devuelve:

attributessi el cambio fué en un atributo
characterData si se produjo en un nodo.
childList si se produjo en los nodos del árbol.

target:Node

Devuelve elnodo afectado por el cambio, dependiendo deltype:

Paraattributes, el elemento cuyos atributos han cambiado.
ParacharacterData, el nodoCharacterData.
ParachildList, El nodo padre cuyos hijos han cambiado.

addedNodes:NodeList

Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un NodeList vacio.

removedNodes:NodeList

Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un NodeList vacio.

previousSibling:Node

Devuelve el nodo hermanoanterior añadido o eliminado, o el valornull.

nextSibling:Node

Devuelve elsiguiente nodo hermano añadido o eliminado, o el valornull.

attributeName:String

Devuelve el nombre local del atributo cambiado, o el valornull.

attributeNamespace:String

Devuelve espacio de nombres (namespace) del atributo cambiado, o el valornull.

oldValue:String

El valor devuelto depende deltype:

Paraattributes,el valor anterior del atributo.
ParacharacterData,los datos antes del cambio
ParachildList,devuelvenull.

Ejemplo de uso

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

// selecciona el nodo targetvar target = document.querySelector("#some-id");// Crea una instancia de observervar 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 configuracionobserver.observe(target, config);// Posteriormente, puede detener la observacionobserver.disconnect();