MutationObserver – как использовать на C#
Что такое Mutation Observer?
Mutation Observer – это встроенный объект, который отслеживает изменения дерева DOM и вызывает или запускает функцию обратного вызова, чтобы реагировать на изменения в DOM. Отслеживание изменений в дереве DOM периодически необходимо для сложных веб-приложений и фреймворков. С помощью Mutation Observer вы можете отслеживать изменения в определенных узлах, атрибутах или дочерних элементах документа и выполнять пользовательские функции, реагирующие на эти изменения.
В библиотеке Aspose.HTML для .NET механизм наблюдения за документом представлен с помощью MutationObserver, который дает возможность получать уведомления о любых изменениях в дереве документов. В этой статье на примерах C# показано, как можно использовать класс MutationObserver для наблюдения за изменениями в DOM.
Как использовать Mutation Observer
Mutation Observer предоставляет возможность наблюдать за изменениями в дереве DOM веб-страницы. В следующем примере демонстрируется реализация MutationObserver и его использование для наблюдения за добавлением новых узлов в документ:
- Создайте новый экземпляр класса HTMLDocument, используя конструктор HTMLDocument(). Этот класс представляет HTML-документ в памяти, который можно анализировать и изменять.
- Создайте новый объект MutationObserver с помощью конструктора
MutationObserver(callback). Функция «callback» принимает в качестве параметров
mutations
(список объектов MutationRecord) иmutationObserver
(объект MutationObserver, обнаруживший мутации). - Используйте конструктор
MutationObserverInit(), чтобы создать объект MutationObserverInit для настройки параметров MutationObserver. Другими словами, вы можете указать, какие изменения следует обнаруживать. Например, в примере свойствам ChildList, Subtree и CharacterData присвоено значение true:
ChildList
обнаруживает изменения в прямых дочерних элементах targetNode.Subtree
обнаруживает изменения во всех потомках узла.CharacterData
используется для наблюдения за изменениями в текстовом содержании.
- Вызовите метод
Observe(target, options), чтобы наблюдать за изменениями DOM. Этот метод принимает
document.Body
в качествеtarget
узла для наблюдения и объектconfig
в качествеoptions
для наблюдения. - Отредактируйте HTML-документ:
- используйте метод CreateElement() класса HTMLDocument, чтобы создать новый элемент
<p>
, и используйте метод AppendChild(), чтобы добавить его в тело документа. - используйте метод CreateTextNode() класса HTMLDocument, чтобы создать текстовый узел с содержимым «Hello World», и используйте метод AppendChild(), чтобы добавить его в качестве дочернего узла к элементу
<p>
.
- используйте метод CreateElement() класса HTMLDocument, чтобы создать новый элемент
- Как только происходит изменение дерева DOM, например, добавление элемента
<p>
и текстового узла в данном случае, функция «обратного вызова» MutationObserver запускается и выводит на консоль сообщение, указывающее, какой узел был добавлен в документ.
Если вы наблюдаете за изменениями узла, ваш обратный вызов не будет запущен до тех пор, пока DOM полностью не завершит изменение. Это поведение было разработано, чтобы заменить события мутации DOM и уменьшить проблему производительности уничтожения в предыдущей спецификации.
1// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
2// Create an empty HTML document
3using (var document = new HTMLDocument())
4{
5 // Create a mutation observer instance
6 var observer = new Aspose.Html.Dom.Mutations.MutationObserver((mutations, mutationObserver) =>
7 {
8 foreach (var record in mutations)
9 {
10 foreach (var node in record.AddedNodes)
11 {
12 Console.WriteLine("The '" + node + "' node was added to the document.");
13 }
14 }
15 });
16
17 // configuration of the observer
18 var config = new Aspose.Html.Dom.Mutations.MutationObserverInit
19 {
20 ChildList = true,
21 Subtree = true,
22 CharacterData = true
23 };
24
25 // pass in the target node to observe with the specified configuration
26 observer.Observe(document.Body, config);
27
28 // Now, we are going to modify DOM tree to check
29 // Create an paragraph element and append it to the document body
30 var p = document.CreateElement("p");
31 document.Body.AppendChild(p);
32 // Create a text and append it to the paragraph
33 var text = document.CreateTextNode("Hello World");
34 p.AppendChild(text);
35
36 Console.WriteLine("Waiting for mutation. Press any key to continue...");
37 Console.ReadLine();
38}
Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчиков, инструментов SEO, генераторов кода HTML, инструменты URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные задачи и сделать свой рабочий процесс безупречным!