MutationObserver – Wie man in Java verwendet

Was ist ein Mutationsbeobachter?

Mutation Observer ist ein integriertes Objekt, das eine Möglichkeit bietet, Änderungen im DOM zu beobachten und darauf zu reagieren. Es ist ein leistungsfähiges Werkzeug für die Erstellung dynamischer Webanwendungen, die eine DOM-Manipulation und Ereignisbehandlung in Echtzeit erfordern. Mit dem Mutation Observer können Sie Änderungen an bestimmten Knoten, Attributen oder untergeordneten Elementen eines Dokuments überwachen und benutzerdefinierte Funktionen ausführen, die auf diese Änderungen reagieren.

In der Aspose.HTML for Java Bibliothek wird ein Mechanismus zur Beobachtung von Dokumenten durch die Klasse MutationObserver dargestellt, die einfach zu konfigurieren ist und es ermöglicht, Benachrichtigungen über Änderungen im Dokumentenbaum zu erhalten. Dieser Artikel zeigt anhand von Java-Beispielen, wie Sie die Klasse MutationObserver verwenden können, um Änderungen im DOM zu beobachten.

Wie man Mutationsbeobachter verwendet

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

Erstellen Sie eine neue Instanz der HTMLDocument-Klasse mit dem Konstruktor HTMLDocument().
Erstellen Sie ein neues MutationObserver-Objekt mit dem Konstruktor MutationObserver(). Der Konstruktor nimmt ein MutationCallback-Objekt als Parameter, das als Callback-Funktion für die Behandlung von Mutationen verwendet wird.
Verwenden Sie den Konstruktor MutationObserverInit(), um ein MutationObserverInit-Objekt zu erstellen. Sie können angeben, welche Art von Änderungen erkannt werden sollen. Zum Beispiel werden die Eigenschaften ChildList, Subtree, und CharacterData im Beispiel auf true gesetzt.
Rufen Sie die Methode observe() auf, um mit der Beobachtung der DOM-Änderungen zu beginnen. Wenn Änderungen im <body>-Element oder seinen Kindknoten auftreten, die mit den konfigurierten Optionen übereinstimmen, wird die Callback-Funktion aufgerufen, um diese Änderungen zu behandeln.
Bearbeiten Sie das HTML-Dokument. Verwenden Sie zum Beispiel die Methode createElement(), um ein neues <p>-Element zu erstellen, und verwenden Sie die Methode appendChild(), um es an den Textkörper des Dokuments anzuhängen; verwenden Sie die Methode createTextNode(), um einen Textknoten mit dem Inhalt “Hello, World!” zu erstellen, und verwenden Sie die Methode appendChild(), um ihn als Kindknoten zum <p>-Element hinzuzufügen.
Sobald eine Änderung im DOM-Baum auftritt, wird die MutationObserver-Callback-Funktion ausgelöst, die eine Meldung auf der Konsole ausgibt, die angibt, welcher Knoten dem Dokument hinzugefügt wurde.

 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

Empfehlungen

Wählen Sie bei der Konfiguration von MutationObserver bestimmte Ziele aus und konzentrieren Sie sich auf bestimmte Elemente oder Attribute, um die Leistung zu optimieren und unnötige Verarbeitung zu vermeiden.
Verwenden Sie effiziente Rückrufe – halten Sie die Logik in der Rückruffunktion leicht, um Leistungsengpässe zu vermeiden, insbesondere in Szenarien mit hoher Mutationsrate.
Verwendung von Konfigurationsoptionen – Feinabstimmung der Beobachtungsparameter mit dem MutationObserverInit-Objekt. Nehmen Sie nur die notwendigen Eigenschaften auf (z.B. ChildList, Subtree, CharacterData), um den Prozess zu optimieren.

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 DOM Mutation Events zu ersetzen und das Problem der Tötungsleistung in der vorherigen Spezifikation zu reduzieren.

Sie können die vollständigen Beispiele und Datendateien unter GitHub herunterladen.

HTML-Ausgabe-Streams HTML-Formular-Editor