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 delMutationObserver
.
Métodos
void observe( |
void disconnect(); |
Array takeRecords(); |
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 MutationRecord
s.
MutationObserverInit
MutationObserverInit
es un objeto para el que se pueden especificar las siguientes propiedades:
childList
, attributes
, o characterData
deben ser true
. En caso contrario, se producirá un error "An invalid or illegal string was specified"Propiedad | Descripción |
childList |
Establecer a |
attributes |
Establecer a |
characterData |
Establecer a |
subtree |
Establecer a |
attributeOldValue |
Establecer a |
characterDataOldValue |
Establecer a |
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:
Propiedad | Tipo | Descripción |
type |
String |
Devuelve:
|
target |
|
Devuelve el nodo afectado por el cambio, dependiendo del
|
addedNodes |
|
Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un NodeList vacio. |
removedNodes |
|
Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un NodeList vacio. |
previousSibling |
|
Devuelve el nodo hermano anterior añadido o eliminado, o el valor |
nextSibling |
|
Devuelve el siguiente nodo hermano añadido o eliminado, o el valor |
attributeName |
String |
Devuelve el nombre local del atributo cambiado, o el valor |
attributeNamespace |
String |
Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor |
oldValue |
String |
El valor devuelto depende del
|
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
BCD tables only load in the browser