Что такое Mutation Observer?

Mutation Observer – это встроенный объект, который позволяет наблюдать и реагировать на изменения в DOM. Это мощный инструмент для создания динамических веб-приложений, требующих манипулирования DOM и обработки событий в реальном времени. С помощью Mutation Observer вы можете отслеживать изменения в определенных узлах, атрибутах или дочерних элементах документа и выполнять пользовательские функции, реагирующие на эти изменения.

В библиотеке Aspose.HTML for Java механизм наблюдения за документами представлен в виде класса MutationObserver, который легко настраивается и позволяет получать уведомления о любых изменениях в дереве документа. В этой статье на примерах Java показано, как можно использовать класс MutationObserver для наблюдения за изменениями в DOM.

Как использовать Mutation Observer

В следующем примере демонстрируется реализация MutationObserver и то, как его использовать для наблюдения за добавлением новых узлов в документ.

Создайте новый экземпляр класса HTMLDocument, используя конструктор HTMLDocument().

Создайте новый объект MutationObserver, используя конструктор MutationObserver(). Конструктор принимает объект MutationCallback в качестве параметра, который используется как функция обратного вызова для обработки мутаций.

Используйте конструктор MutationObserverInit() для создания объекта MutationObserverInit. Вы можете указать, какие изменения следует обнаруживать. Например, в этом примере свойствам ChildList, Subtree и CharacterData присвоено значение true.

Вызовите метод observe(), чтобы начать наблюдать за изменениями DOM. Когда происходят изменения в элементе <body> или его дочерних узлах, которые соответствуют настроенным параметрам, будет вызываться функция обратного вызова для обработки этих мутаций.

Отредактируйте HTML-документ. Например, используйте метод createElement() для создания нового элемента <p> и используйте метод appendChild() для добавления его в тело документа; используйте метод createTextNode(), чтобы создать текстовый узел с содержимым «Hello, World!», и используйте метод appendChild(), чтобы добавить его в качестве дочернего узла к элементу <p>.

Как только происходит изменение дерева DOM, запускается функция обратного вызова MutationObserver, которая выводит на консоль сообщение, указывающее, какой узел был добавлен в документ.

 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

Рекомендации

Выберите конкретные цели и сосредоточьтесь на определенных элементах или атрибутах при настройке MutationObserver, чтобы оптимизировать производительность и уменьшить ненужную обработку.

Используйте эффективные обратные вызовы – сохраняйте упрощенную логику функции обратного вызова, чтобы избежать узких мест в производительности, особенно в сценариях с высокой частотой мутаций.

Используйте параметры конфигурации – настройте параметры наблюдения с помощью объекта MutationObserverInit. Включайте только необходимые свойства (например, ChildList, Subtree, CharacterData), чтобы оптимизировать процесс.

Если вы наблюдаете за изменениями узла, ваш обратный вызов не будет запущен до тех пор, пока DOM полностью не завершит изменение. Такое поведение было разработано для замены событий мутации DOM и уменьшения проблемы производительности уничтожения в предыдущей спецификации.

Вы можете загрузить полные примеры и файлы данных по адресу GitHub.

Analyzing your prompt, please hold on...

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

MutationObserver – Как использовать в Java

Что такое Mutation Observer?

Как использовать Mutation Observer

Рекомендации