Observadores de mutación

Muchas aplicaciones y sitios crean sus propios controles personalizados con HTML y JavaScript. Estos controles no son intrínsecos como los que proporciona el elemento input. Para que estos controles funcionen bien con el resto de la plataforma, deben ser capaces de adaptarse a los cambios de contenido, responder a los eventos y administrar la interacción del usuario. Las aplicaciones y los sitios necesitan supervisar las mutaciones en el modelo de objetos de documento (DOM) y responder de manera adecuada.

En Internet Explorer 11, los desarrolladores web obtienen compatibilidad para los observadores de mutación DOM del W3C DOM4 que les ayuda a controlar qué mutaciones tienen que observar y seguir. Por ejemplo, quizás quieran recibir notificaciones después de que se ejecute un script y antes de que se dibuje un nuevo marco en la pantalla.

Los observadores de mutación permiten realizar sustituciones con un rápido rendimiento en los mismos escenarios que los eventos de mutación, y suponen una alternativa a los escenarios admitidos por los eventos de cambio de propiedad. Para obtener más información, consulta "Migración de los eventos de cambio de propiedad y mutación a los observadores de mutación".

El objeto MutationObserver

Un objeto MutationObserver sirve para supervisar y registrar los cambios especificados en uno o varios nodos del DOM. Entre los tipos de cambio que podrás observar se encuentran los siguientes:

  • Adiciones y eliminaciones de elementos secundarios
  • Adiciones, eliminaciones y cambios de atributos
  • Cambios en valores de nodo de texto secundario

El constructor MutationObserver requiere una función de devolución de llamada que usa para notificarte las mutaciones:


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

Cuando hayas creado un nuevo objeto MutationObserver, usa el método observe para registrarlo en los nodos que quieres supervisar y para especificar los tipos de información que se recopilará:


// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});


Puedes supervisar y recopilar los siguientes tipos de información:

Opción de MutationObserverDescripción

childList

Configúrala en true para supervisar las adiciones y las eliminaciones de los elementos secundarios del nodo. Esta opción incluye nodos de texto que se agregan o se eliminan como elementos secundarios del elemento de destino. Ejemplo:

{ childList: true }

attributes

Configúrala en true para supervisar los cambios (adiciones, eliminaciones y cambios de valor) en los atributos del nodo de destino. Ejemplo:

{ attributes: true }

characterData

Configúrala en true para supervisar los cambios en el valor del contenido del texto del nodo de destino (nodos de texto secundarios). Ejemplo:

{ characterData: true }

subtree

Configúrala en true para supervisar también los cambios en todos los descendientes del nodo de destino (childList, attributes o characterData también deben ser true). Ejemplo:

{ childList: true, subtree: true }

attributeOldValue

Configúrala en true para registrar el valor de atributo anterior del nodo de destino (attributes también debe ser true). Ejemplo:

{ attributes: true, attributeOldValue: true }

characterDataOldValue

Configúrala en true para registrar los datos de texto anteriores del nodo de destino (characterData también debe ser true). Ejemplo:

{ characterData: true, characterDataOldValue: true }

attributeFilter

Configúrala en una matriz de nombres locales de atributo (sin espacio de nombres) para supervisar únicamente los cambios en determinados atributos (attributes también debe ser true). Ejemplo:

{ attributes: true, attributeFilter: ["id", "dir"] }

 

Cuando se produce una mutación relevante, MutationObserver registra la información sobre el cambio que solicitaste en un objeto MutationRecord e invoca la función de devolución de llamada, pero no hasta que se haya ejecutado todo el script en el ámbito actual. Es posible que se produzca más de una mutación (cada una representada por un solo MutationRecord) desde la última vez que se invocó la devolución de llamada.


// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

// Register the target node to observe and specify which DOM changes to watch
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


Se emplean dos parámetros para invocar la función de devolución de llamada:

  • Una matriz de objetos MutationRecord que representa los cambios que se produjeron en el elemento (o elementos)
  • Una referencia al objeto MutationObserver que invocó la devolución de llamada

El objeto MutationRecord

Puedes repasar objetos MutationRecord individuales para identificar el tipo de cambio y su contenido:


// Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}

Un objeto MutationRecord proporciona la siguiente información:

Propiedad MutationRecordDescripción

type

Recupera el tipo de mutación representada por los atributos MutationRecord.

Un atributo cambió en el nodo de destino.

characterData

Cambió el valor de contenido de texto (un nodo de texto secundario) del nodo de destino.

childList

Se agregó o se eliminó un elemento secundario (o descendiente del subárbol) del nodo de destino.

target

Recupera el nodo en el que se registró MutationRecord.

addedNodes

Recupera una matriz de nodos que se agregaron. La matriz está vacía si no se agregaron nodos.

removedNodes

Recupera una matriz de nodos que se quitaron. La matriz está vacía si no se quitaron nodos.

previousSibling

Recupera el elemento del mismo nivel anterior del nodo que se agregó o quitó, o null si no existe ninguno (o si MutationRecord.type no es childList).

nextSibling

Recupera el siguiente elemento del mismo nivel del nodo que se agregó o quitó, o null si no existe ninguno (o si MutationRecord.type no es childList).

attributeName

Recupera el nombre del atributo que se agregó, se quitó o cambió (o, de lo contrario, null).

attributeNamespace

Recupera el espacio de nombres del atributo que se agregó, se quitó o cambió (o, de lo contrario, null).

oldValue

Recupera el valor anterior del atributo o characterData que se modificó (o, de lo contrario, null).

 

La matriz de MutationObserver de objetos MutationRecord acumula todos los cambios relevantes hasta que se llama al método takeRecords, que quita los registros de la cola y los devuelve.

Para detener la supervisión de cambios, llama al método disconnect de MutationObserver. Asegúrate de que primero llamas al método takeRecords si necesitas guardar los datos de mutación, No se conservarán después de desconectar un MutationObserver de sus elementos de destino.

Aunque se puede reutilizar una instancia de MutationObserver después de desconectarlo de sus elementos de destino anteriores, su función de devolución de llamada no se puede modificar y las opciones de elementos de destino y registro de cambios deben volver a registrarse usando el método observe.

Temas relacionados

Migración de los eventos de cambio de propiedad y mutación a los observadores de mutación

 

 

Mostrar:
© 2014 Microsoft