MutationObserver – Überwachen von DOM-Änderungen in HTML-Dokumenten

Was ist Mutationsbeobachter?

Mutation Observer ist ein eingebautes Objekt, das auf Änderungen im DOM-Baum achtet und eine Callback-Funktion aufruft oder auslöst, um auf die Änderungen im DOM zu reagieren. Die Beobachtung von Änderungen im DOM-Baum ist für komplexe Webanwendungen und Frameworks regelmäßig notwendig. Mit dem Mutation Observer können Sie Änderungen an bestimmten Knoten, Attributen oder untergeordneten Elementen eines Dokuments überwachen und benutzerdefinierte Funktionen als Reaktion auf diese Änderungen ausführen.

In der Aspose.HTML for .NET-Bibliothek ist mit MutationObserver ein Mechanismus zur Beobachtung von Dokumenten vorhanden, der in hohem Maße konfigurierbar ist und es ermöglicht, über alle Änderungen im Dokumentenbaum benachrichtigt zu werden. Dieser Artikel zeigt anhand von C#-Beispielen, wie Sie die Klasse MutationObserver verwenden können, um Änderungen im DOM zu beobachten.

Wie man Mutation Observer verwendet

Mutation Observer bietet die Möglichkeit, Änderungen im DOM-Baum einer Webseite zu beobachten. Das folgende Beispiel demonstriert die Implementierung von MutationObserver und wie man damit das Hinzufügen neuer Knoten zum Dokument beobachten kann:

1. Erstellen Sie eine neue Instanz der Klasse HTMLDocument mit dem Konstruktor HTMLDocument(). Diese Klasse repräsentiert ein HTML-Dokument im Speicher, das geparst und verändert werden kann.
2. Erstellen Sie ein neues MutationObserver-Objekt mit Hilfe des MutationObserver(callback) Konstruktors. Die Funktion callback nimmt mutations (eine Liste von MutationRecord Objekten) und mutationObserver (das MutationObserver Objekt, das die Mutationen entdeckt hat) als Parameter.
3. Verwenden Sie den MutationObserverInit() Konstruktor, um ein MutationObserverInit Objekt zu erstellen, um die Optionen für den MutationObserver zu konfigurieren. Mit anderen Worten, Sie können angeben, welche Art von Änderungen erkannt werden sollen. In diesem Beispiel werden die Eigenschaften ChildList, Subtree und CharacterData auf true gesetzt:
   • ChildList erkennt Änderungen in den direkten Kindern von targetNode.
   • Subtree erkennt Änderungen in allen Nachkommen des Knotens.
   • CharacterData wird verwendet, um die Änderungen im Textinhalt zu beobachten.
4. Rufen Sie die Methode Observe(target, options) auf, um die DOM-Änderungen zu beobachten. Diese Methode nimmt den document.Body als den zu beobachtenden Target-Knoten und das config-Objekt als die options für die Beobachtung.
5. Bearbeiten Sie das HTML-Dokument:

• Verwenden Sie die Methode CreateElement() der Klasse HTMLDocument, um ein neues <p>-Element zu erstellen, und verwenden Sie die Methode AppendChild(), um es an den Body des Dokuments anzuhängen.
• Verwenden Sie die Methode CreateTextNode() der Klasse HTMLDocument, um einen Textknoten mit dem Inhalt “Hello, World” zu erstellen, und verwenden Sie die Methode AppendChild(), um ihn als Kindknoten an das Element <p> anzuhängen.

6. Sobald eine Änderung im DOM-Baum eintritt, wie z.B. das Hinzufügen des <p>-Elements und des Textknotens in diesem Fall, wird die MutationObserver-Funktion callback ausgelöst und gibt eine Meldung auf der Konsole aus, die angibt, welcher Knoten dem Dokument hinzugefügt wurde.

Wenn Sie einen Knoten auf Änderungen beobachten, wird Ihr Callback erst ausgelöst, wenn sich das DOM vollständig geändert hat. Dieses Verhalten wurde entwickelt, um die DOM Mutation Events zu ersetzen und das Leistungsproblem der vorherigen Spezifikation zu reduzieren.

// Use Mutation Observer to watch for new nodes added to a document with C#

// Create an empty HTML document
using (HTMLDocument document = new HTMLDocument())
{
    // Create a mutation observer instance
    Html.Dom.Mutations.MutationObserver observer = new Html.Dom.Mutations.MutationObserver((mutations, mutationObserver) =>
    {
        foreach (MutationRecord record in mutations)
        {
            foreach (Node node in record.AddedNodes)
            {
                Console.WriteLine("The '" + node + "' node was added to the document.");
            }
        }
    });

    // Configuration of the observer
    MutationObserverInit config = new Html.Dom.Mutations.MutationObserverInit
    {
        ChildList = true,
        Subtree = true,
        CharacterData = true
    };

    // Pass in the target node to observe with the specified configuration
    observer.Observe(document.Body, config);

    // Now, we are going to modify DOM tree to check
    // Create a paragraph element and append it to the document body
    Element p = document.CreateElement("p");
    document.Body.AppendChild(p);

    // Create a text and append it to the paragraph
    Text text = document.CreateTextNode("Hello, World");
    p.AppendChild(text);

    Console.WriteLine("Waiting for mutation. Press any key to continue...");
    Output.ToString();
}

Aspose.HTML bietet HTML-Webanwendungen, eine Online-Sammlung von kostenlosen Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Konvertieren, fusionieren, kodieren, generieren Sie HTML-Code, extrahieren Sie Daten aus dem Web oder analysieren Sie Webseiten im Hinblick auf SEO, wo immer Sie sind. Nutzen Sie unsere Sammlung von HTML-Webanwendungen, um Ihre täglichen Aufgaben zu erledigen und Ihren Arbeitsablauf nahtlos zu gestalten!