MutationObserver – Comment l'utiliser en Java

Qu’est-ce que l’observateur de mutations ?

L’observateur de mutation est un objet intégré qui permet d’observer les changements dans le DOM et d’y réagir. Il s’agit d’un outil puissant pour la construction d’applications web dynamiques qui nécessitent une manipulation du DOM en temps réel et la gestion d’événements. Avec l’observateur de mutations, vous pouvez surveiller les modifications apportées à des nœuds, attributs ou éléments enfants spécifiques d’un document et exécuter des fonctions personnalisées qui répondent à ces modifications.

Dans la bibliothèque Aspose.HTML for Java, un mécanisme d’observation des documents est représenté par la classe MutationObserver, qui est facile à configurer et permet de recevoir des notifications de tout changement dans l’arborescence du document. Cet article utilise des exemples Java pour montrer comment vous pouvez utiliser la classe MutationObserver pour observer les changements dans le DOM.

Comment utiliser l’observateur de mutation

L’observateur de mutations permet d’observer les changements dans l’arbre DOM d’une page web. L’exemple suivant montre l’implémentation de MutationObserver et comment l’utiliser pour observer l’ajout de nouveaux nœuds au document.

Créez une nouvelle instance de la classe HTMLDocument à l’aide du constructeur HTMLDocument().
Créez un nouvel objet MutationObserver à l’aide du constructeur MutationObserver(). Le constructeur prend en paramètre un objet MutationCallback, qui est utilisé comme fonction de rappel pour gérer les mutations.
Utilisez le constructeur MutationObserverInit() pour créer un objet MutationObserverInit. Vous pouvez spécifier le type de changement à détecter. Par exemple, les propriétés ChildList, Subtree et CharacterData sont fixées à true dans l’exemple.
Appelez la méthode observe() pour commencer à observer les changements dans le DOM. Lorsque des changements se produisent dans l’élément <body> ou ses nœuds enfants qui correspondent aux options configurées, la fonction de rappel sera invoquée pour gérer ces mutations.
Modifiez le document HTML. Par exemple, utilisez la méthode createElement() pour créer un nouvel élément <p> et utilisez la méthode appendChild() pour l’ajouter au corps du document ; utilisez la méthode createTextNode() pour créer un nœud de texte avec le contenu “Hello, World !”, et utilisez la méthode appendChild() pour l’ajouter comme nœud enfant à l’élément <p>.
Dès qu’une modification de l’arbre DOM se produit, la fonction de rappel MutationObserver est déclenchée et imprime un message sur la console indiquant quel nœud a été ajouté au 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

Recommandations

Sélectionnez des cibles spécifiques et concentrez-vous sur des éléments ou des attributs spécifiques lorsque vous configurez MutationObserver afin d’optimiser les performances et de réduire les traitements inutiles.
Utiliser des fonctions de rappel efficaces – la logique de la fonction de rappel doit être légère pour éviter les goulets d’étranglement, en particulier dans les scénarios à taux de mutation élevé.
Utiliser les options de configuration – affiner les paramètres d’observation en utilisant l’objet MutationObserverInit. N’incluez que les propriétés nécessaires (par exemple ChildList, Subtree, CharacterData) pour optimiser le processus.

Si vous observez un noeud pour des changements, votre callback ne sera pas déclenché jusqu’à ce que le DOM ait complètement fini de changer. Ce comportement a été conçu pour remplacer les événements de mutation du DOM et réduire le problème de performance de la spécification précédente.

Vous pouvez télécharger les exemples complets et les fichiers de données à partir de GitHub.

Flux de sortie HTML Éditeur de formulaires HTML