MutationObserver – Monitoriza los cambios del DOM en HTML

¿Qué es el observador de mutaciones?

Mutation Observer es un objeto integrado que observa los cambios en el árbol DOM y llama o activa una función de devolución de llamada para reaccionar a los cambios en el DOM. Es necesario observar periódicamente los cambios en el árbol DOM para marcos y aplicaciones web complejos. Con Mutation Observer, puede monitorear los cambios en los nodos, atributos o elementos secundarios específicos de un documento y ejecutar funciones personalizadas en respuesta a esos cambios.

En la biblioteca Aspose.HTML for .NET, un mecanismo de observación de documentos se representa con MutationObserver, que es altamente configurable y le permite recibir notificaciones de cualquier cambio en el árbol de documentos. Este artículo utiliza ejemplos de C# para mostrar cómo se puede utilizar la clase MutationObserver para observar cambios en el DOM.

Cómo utilizar el observador de mutaciones

Mutation Observer brinda la capacidad de observar cambios en el árbol DOM de una página web. El siguiente ejemplo demuestra la implementación de MutationObserver y cómo usarlo para observar la adición de nuevos nodos al documento:

1. Cree una nueva instancia de la clase HTMLDocument usando el constructor HTMLDocument(). Esta clase representa un documento HTML en la memoria que se puede analizar y modificar.
2. Cree un nuevo objeto MutationObserver utilizando el constructor MutationObserver(callback). La función callback toma mutations (una lista de objetos MutationRecord) y mutationObserver (el objeto MutationObserver que detectó las mutaciones) como parámetros.
3. Utilice el constructor MutationObserverInit() para crear un objeto MutationObserverInit para configurar las opciones de MutationObserver. En otras palabras, puede especificar qué tipo de cambios detectar. Por ejemplo, las propiedades ChildList, Subtree y CharacterData se establecen en verdadero en el ejemplo:
   • ChildList detecta cambios en hijos directos de targetNode.
   • Subtree detecta cambios en todos los descendientes del nodo.
   • CharacterData se utiliza para observar los cambios en el contenido del texto.
4. Llame al método Observe(target, options) para observar los cambios del DOM. Este método toma el document.Body como el nodo target para observar y el objeto config como las options para la observación.
5. Edite el documento HTML:

• use el método CreateElement() de la clase HTMLDocument para crear un nuevo elemento <p> y use el método AppendChild() para agregarlo al cuerpo del documento.
• use el método CreateTextNode() de la clase HTMLDocument para crear un nodo de texto con el contenido “Hello, World” y use el método AppendChild() para agregarlo como un nodo secundario al elemento <p>.

6. Tan pronto como ocurre un cambio en el árbol DOM, como agregar el elemento <p> y el nodo de texto en este caso, se activa la función callback de MutationObserver e imprime un mensaje en la consola indicando qué nodo fue añadido al documento.

Si está observando un nodo en busca de cambios, su devolución de llamada no se activará hasta que el DOM haya terminado de cambiar por completo. Este comportamiento fue diseñado para reemplazar los eventos de mutación DOM y reducir el problema de rendimiento de eliminación en la especificación anterior.

// Use Mutation Observer to watch for new nodes added to a document with C#

// Create an empty HTML document
using (HTMLDocument document = new HTMLDocument())
{
    // Create a mutation observer instance
    Html.Dom.Mutations.MutationObserver observer = new Html.Dom.Mutations.MutationObserver((mutations, mutationObserver) =>
    {
        foreach (MutationRecord record in mutations)
        {
            foreach (Node node in record.AddedNodes)
            {
                Console.WriteLine("The '" + node + "' node was added to the document.");
            }
        }
    });

    // Configuration of the observer
    MutationObserverInit config = new Html.Dom.Mutations.MutationObserverInit
    {
        ChildList = true,
        Subtree = true,
        CharacterData = true
    };

    // Pass in the target node to observe with the specified configuration
    observer.Observe(document.Body, config);

    // Now, we are going to modify DOM tree to check
    // Create a paragraph element and append it to the document body
    Element p = document.CreateElement("p");
    document.Body.AppendChild(p);

    // Create a text and append it to the paragraph
    Text text = document.CreateTextNode("Hello, World");
    p.AppendChild(text);

    Console.WriteLine("Waiting for mutation. Press any key to continue...");
    Output.ToString();
}

Aspose.HTML ofrece Aplicaciones web HTML que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más gratuitos. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Convierta, fusione, codifique, genere código HTML, extraiga datos de la web o analice páginas web en términos de SEO fácilmente dondequiera que esté. Utilice nuestra colección de aplicaciones web HTML para realizar sus asuntos diarios y hacer que su flujo de trabajo sea fluido.