QUESTION: Что такое Mutation Observer?

The Mutation Observer API in JavaScript is a built-in mechanism that allows you to asynchronously track any changes occurring in the Document Object Model, i.e., the DOM structure. This tool replaced obsolete mutation events and works much more efficiently because it batches all changes and invokes the callback function once per rendering cycle.

Creating an observer is done using the new MutationObserver(callback) constructor, which receives a function that accepts an array of mutation records and the observer instance itself. To start tracking a specific node, the observer.observe(target, config) method is used, where target is the target DOM element and config is a configuration object that defines the types of changes to monitor.

In the configuration object, you can specify the childList parameter to track the addition or removal of child elements, attributes to monitor attribute changes, and characterData to track changes to the text content of nodes. In addition, if you need to monitor not only direct descendants but the entire nested tree structure of elements inside the target node, the subtree boolean flag is used with a value of true. This is indispensable when creating complex user interfaces, automatic text translation plugins, or testing systems.