MutationObserver – Surveiller les changements DOM dans les documents HTML

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

L’observateur de mutation est un objet intégré qui surveille les changements dans l’arbre DOM et appelle ou déclenche une fonction de rappel pour réagir aux changements dans le DOM. L’observation des changements dans l’arbre DOM est périodiquement nécessaire pour les applications web complexes et les frameworks. Avec l’observateur de mutation, 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 répondant à ces modifications.

Dans la bibliothèque Aspose.HTML for .NET, un mécanisme d’observation de document est représenté par MutationObserver, qui est hautement configurable et vous permet d’être notifié de tout changement dans l’arbre du document. Cet article utilise des exemples C# 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 mutation 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(). Cette classe représente un document HTML en mémoire qui peut être analysé et modifié.
Créez un nouvel objet MutationObserver à l’aide du constructeur MutationObserver(callback). La fonction callback prend comme paramètres mutations (une liste d’objets MutationRecord ) et mutationObserver (l’objet MutationObserver qui a détecté les mutations).
Utilisez le constructeur MutationObserverInit() pour créer un objet MutationObserverInit afin de configurer les options du MutationObserver. En d’autres termes, vous pouvez spécifier le type de changements à détecter. Par exemple, les propriétés ChildList, Subtree et CharacterData sont définies sur true dans l’exemple :
- ChildList détecte les modifications dans les enfants directs de targetNode.
- Subtree détecte les modifications dans tous les descendants du nœud.
- CharacterData permet d’observer les modifications du contenu textuel.
Appelez la méthode Observe(target, options) pour observer les changements du DOM. Cette méthode prend le document.Body comme noeud target à observer et l’objet config comme options pour l’observation.
Modifier le document HTML :

utiliser la méthode CreateElement() de la classe HTMLDocument pour créer un nouvel élément <p> et utiliser la méthode AppendChild() pour l’ajouter au corps du document.
utiliser la méthode CreateTextNode() de la classe HTMLDocument pour créer un nœud de texte avec le contenu “Hello, World”, et utiliser la méthode AppendChild() pour l’ajouter en tant que nœud enfant à l’élément <p>.

Dès qu’une modification de l’arbre DOM se produit, comme l’ajout de l’élément <p> et du noeud texte dans ce cas, la fonction callback du MutationObserver est déclenchée et imprime un message sur la console indiquant quel noeud a été ajouté au document.

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.

 1// Use Mutation Observer to watch for new nodes added to a document with C#
 2
 3// Create an empty HTML document
 4using (HTMLDocument document = new HTMLDocument())
 5{
 6    // Create a mutation observer instance
 7    Html.Dom.Mutations.MutationObserver observer = new Html.Dom.Mutations.MutationObserver((mutations, mutationObserver) =>
 8    {
 9        foreach (MutationRecord record in mutations)
10        {
11            foreach (Node node in record.AddedNodes)
12            {
13                Console.WriteLine("The '" + node + "' node was added to the document.");
14            }
15        }
16    });
17
18    // Configuration of the observer
19    MutationObserverInit config = new Html.Dom.Mutations.MutationObserverInit
20    {
21        ChildList = true,
22        Subtree = true,
23        CharacterData = true
24    };
25
26    // Pass in the target node to observe with the specified configuration
27    observer.Observe(document.Body, 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
31    Element p = document.CreateElement("p");
32    document.Body.AppendChild(p);
33
34    // Create a text and append it to the paragraph
35    Text text = document.CreateTextNode("Hello, World");
36    p.AppendChild(text);
37
38    Console.WriteLine("Waiting for mutation. Press any key to continue...");
39    Output.ToString();
40}

Example-MutationObserver.cs hosted with ❤ by GitHub

Aspose.HTML propose des applications Web HTML qui sont une collection en ligne de convertisseurs gratuits, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. Convertissez, fusionnez, encodez, générez facilement du code HTML, extrayez des données du web ou analysez des pages web en termes de référencement, où que vous soyez. Utilisez notre collection d’applications web HTML pour effectuer vos tâches quotidiennes et rendre votre flux de travail fluide !

Flux de sortie HTML Éditeur de formulaires HTML