MutationObserver – cómo utilizarlo en Java

¿Qué es Mutation Observer?

Mutation Observer es un objeto integrado que proporciona una forma de observar y reaccionar ante cambios en el DOM. Es una herramienta poderosa para crear aplicaciones web dinámicas que requieren manipulación DOM y manejo de eventos en tiempo real. Con Mutation Observer, puede monitorear cambios en nodos, atributos o elementos secundarios específicos de un documento y ejecutar funciones personalizadas que respondan a esos cambios.

En la biblioteca Aspose.HTML for Java, un mecanismo de observación de documentos está representado con la clase MutationObserver, que es fácil de configurar y permite recibir notificaciones de cualquier cambio en el árbol de documentos. Este artículo utiliza ejemplos de Java para mostrar cómo se puede utilizar la clase MutationObserver para observar cambios en el DOM.

Cómo utilizar Mutation Observer

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.

Cree una nueva instancia de la clase HTMLDocument usando el constructor HTMLDocument().
Cree un nuevo objeto MutationObserver utilizando el constructor MutationObserver(). El constructor toma un objeto MutationCallback como parámetro, que se utiliza como función de devolución de llamada para manejar mutaciones.
Utilice el constructor MutationObserverInit() para crear un objeto MutationObserverInit. Puede especificar qué tipo de cambios detectar. Por ejemplo, las propiedades ChildList, Subtree y CharacterData se establecen como true en el ejemplo.
Llame al método observe() para comenzar a observar los cambios del DOM. Cuando se producen cambios en el elemento <body> o sus nodos secundarios que coinciden con las opciones configuradas, se invocará la función de devolución de llamada para manejar esas mutaciones.
Edite el documento HTML. Por ejemplo, use el método createElement() para crear un nuevo elemento <p> y use el método appendChild() para agregarlo al cuerpo del documento; use el método createTextNode() 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>.
Tan pronto como se produce un cambio en el árbol DOM, se activa la función de devolución de llamada MutationObserver e imprime un mensaje en la consola indicando qué nodo se agregó al documento.

 1// Create an empty HTML document
 2HTMLDocument document = new HTMLDocument();
 3
 4// Create an instance of the MutationObserver
 5MutationObserver observer = new MutationObserver(new MutationCallback() {
 6    @Override
 7    public void invoke(com.aspose.html.utils.collections.generic.IGenericList<MutationRecord> mutations, MutationObserver mutationObserver) {
 8        for (int i = 0; i < mutations.size(); i++) {
 9            MutationRecord record = mutations.get_Item(i);
10            for (Node node : record.getAddedNodes().toArray()) {
11                System.out.println("The '" + node + "' node was added to the document.");
12            }
13        }
14    }
15});
16
17// Configure options for the MutationObserver
18MutationObserverInit config = new MutationObserverInit();
19config.setChildList(true);
20config.setSubtree(true);
21config.setCharacterData(true);
22
23// Pass to observer the target node to observe with the specified configuration
24observer.observe(document.getBody(), config);
25
26// Now, we are going to modify DOM tree to check
27// Create a paragraph element and append it to the document body
28Element p = document.createElement("p");
29document.getBody().appendChild(p);
30// Create a text and append it to the paragraph
31Text text = document.createTextNode("Hello World");
32p.appendChild(text);
33
34System.out.println("Waiting for mutation. Press any key to continue...");
35System.in.read();

view raw EAdvanced_MutationObserver hosted with ❤ by GitHub

Recomendaciones

Seleccione objetivos específicos y céntrese en elementos o atributos específicos al configurar MutationObserver para optimizar el rendimiento y reducir el procesamiento innecesario.
Utilice devoluciones de llamada eficientes: mantenga ligera la lógica de la función de devolución de llamada para evitar cuellos de botella en el rendimiento, especialmente en escenarios de alta tasa de mutación.
Utilice las opciones de configuración: ajuste los parámetros de observación utilizando el objeto MutationObserverInit. Incluya solo las propiedades necesarias (por ejemplo, ChildList, Subtree, CharacterData) para optimizar el proceso.

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.

Puede descargar los ejemplos completos y los archivos de datos desde GitHub.

Output Streams Editor de formularios HTML