What Is Mutation Observer?

Mutation Observer is a built-in object that provides a way to observe and react to changes in the DOM. It is a powerful tool for building dynamic web applications that require real-time DOM manipulation and event handling. With the Mutation Observer, you can monitor changes to specific nodes, attributes, or child elements of a document and execute custom functions that respond to those changes.

In Aspose.HTML for Java library, a document observation mechanism is represented with MutationObserver class, which is easy to configure and makes it possible to receive notifications of any changes in the document tree. This article uses Java examples to show how you can use the MutationObserver class to observe changes in the DOM.

How To Use Mutation Observer

Mutation Observer provides the ability to observe changes in the DOM tree of a web page. The following example demonstrates the implementation of MutationObserver and how to use it to observe adding new nodes to the document.

Create a new instance of the HTMLDocument class using HTMLDocument() constructor.

Create a new MutationObserver object using the MutationObserver() constructor. The constructor takes a MutationCallback object as a parameter, which is used as a callback function for handling mutations.

Use the MutationObserverInit() constructor to create a MutationObserverInit object. You can specify what kind of changes to detect. For example, ChildList, Subtree, and CharacterData properties are set to true in the example.

Call the observe() method to start observing the DOM changes. When changes occur in the <body> element or its child nodes that match the configured options, the callback function will be invoked to handle those mutations.

Edit the HTML document. For example, use the createElement() method to create a new <p> element, and use the appendChild() method to append it to the body of the document; use the createTextNode() method to create a text node with the content “Hello, World!”, and use the appendChild() method to add it as a child node to the <p> element.

As soon as a DOM tree change occurs, the MutationObserver callback function is fired, and it prints a message to the console indicating which node was added to the document.

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

Example_ObserveDomChangesWithMutationObserver.java hosted with ❤ by GitHub

Recommendations

Select specific targets and focus on specific elements or attributes when configuring MutationObserver to optimize performance and reduce unnecessary processing.

Use efficient callbacks – keep the logic in the callback function lightweight to prevent performance bottlenecks, especially in high mutation rate scenarios.

Use configuration options – fine-tune the observation parameters using the MutationObserverInit object. Include only the necessary properties (e.g. ChildList, Subtree, CharacterData) to optimize the process.

If you are observing a node for changes, your callback will not be fired until the DOM has completely finished changing. This behavior was designed to replace DOM Mutation Events and reduce the killing performance issue in the previous specification.

You can download the complete examples and data files from GitHub.

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.

MutationObserver – How to Use in Java

What Is Mutation Observer?

How To Use Mutation Observer

Recommendations