MutationObserver – Мониторинг изменений DOM в HTML

Что такое Mutation Observer?

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

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

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

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

1. Создайте новый экземпляр класса HTMLDocument, используя конструктор HTMLDocument(). Этот класс представляет HTML-документ в памяти, который можно анализировать и изменять.
2. Создайте новый объект MutationObserver с помощью конструктора MutationObserver(callback). Функция «callback» принимает в качестве параметров mutations (список объектов MutationRecord) и mutationObserver (объект MutationObserver, обнаруживший мутации).
3. Используйте конструктор MutationObserverInit(), чтобы создать объект MutationObserverInit для настройки параметров MutationObserver. Другими словами, вы можете указать, какие изменения следует обнаруживать. Например, в примере свойствам ChildList, Subtree и CharacterData присвоено значение true:
   • ChildList обнаруживает изменения в прямых дочерних элементах targetNode.
   • Subtree обнаруживает изменения во всех потомках узла.
   • CharacterData используется для наблюдения за изменениями в текстовом содержании.
4. Вызовите метод Observe(target, options), чтобы наблюдать за изменениями DOM. Этот метод принимает document.Body в качестве target узла для наблюдения и объект config в качестве options для наблюдения.
5. Отредактируйте HTML-документ:
   • используйте метод CreateElement() класса HTMLDocument, чтобы создать новый элемент <p>, и используйте метод AppendChild(), чтобы добавить его в тело документа.
   • используйте метод CreateTextNode() класса HTMLDocument, чтобы создать текстовый узел с содержимым «Hello World», и используйте метод AppendChild(), чтобы добавить его в качестве дочернего узла к элементу <p>.
6. Как только происходит изменение дерева DOM, например, добавление элемента <p> и текстового узла в данном случае, функция «обратного вызова» MutationObserver запускается и выводит на консоль сообщение, указывающее, какой узел был добавлен в документ.

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

// 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 предлагает бесплатные Приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов кода HTML, инструменты URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные задачи и сделать свой рабочий процесс безупречным!