Set the document DOM events, MutationObserver, MutationSummary

I'll stay here so as not to lose

If you need to check for changes in any elements inside an element, then a good way would be to track the event through DOM

Or if you optimize and check the site for PageSpeed and you are the developer of this page content, then use MutationObserver 😉

Object MutationObserver

To track changes in the DOM we use an object MutationObserver, this is a new design that should now be used:

I will give an example of how it should be used es6 in a new code syntax (good for those who do assembly):

Or an example of how it should be used in the old format:

MutationObserver also has a method takeRecords(), which returns a list of all relevant DOM changes that were detected MutationObserver, takeRecords() but have not yet been processed by the observer callback function, leaving the mutation queue empty.

The code on lines 11-17 fetches all unprocessed mutation records, then calls a callback with the records so they can be processed. This is done immediately before calling disconnect() to stop observing the DOM.

I will describe the parameters passed separately:

attributes - in node attributes

childList - changes in immediate children of node

subtree - in all descendants of node

attributeFilter - an array of attribute names to watch only the selected ones

characterData - whether to watch node.data (text content)

characterDataOldValue - if true, will pass both the old and new node.data values to the callback, otherwise only the new one (also requires the characterData option)

attributeOldValue - if true, will pass both the old and new attribute values to the callback, otherwise only the new one (the attributes option is also required)

Known Methods for MutationObserver:

observe - Track, call when DOM changes

disconnect - stop event tracking, disable

takeRecords - returns a list of all relevant DOM changes that have not yet been processed

Объект MutationSummary
(If you use the MutationSummar libraryy)

The use of the MutationSummary library makes it easier to filter mutations and provides detailed reports on added and removed elements:

Using es6:

Or using the usual format to support all browsers, unless of course there are those that do not support es6:

Thanks to the ability to write queries, this library simplifies the processing of changes.

Attention, this is an old list that should no longer be used to track the DOM, but this is necessary to understand that there are events, and they work, but the browser will not accept them in the future!

DOMAttrModified - if the attribute of the DOM element has changed;

DOMAttributeNameChanged - if the attribute name of the DOM element has changed;

DOMCharacterDataModified - if any text has changed, be it a regular 'text node' or a simple comment on a DOM element;

DOMElementNameChanged - if the name of the DOM element has changed;

DOMNodeInserted - if a DOM element has a new element inserted;

DOMNodeInsertedIntoDocument - if a new element is inserted into document;

DOMNodeRemoved - if a DOM element has had an element removed;

DOMNodeRemovedFromDocument - if any element in document was deleted;

DOMSubtreeModified - if there is any change in document.

An example of how we will use:

$('body').on('DOMNodeInserted', '.test-block', function() {
    console.log('Added element inside .test-block'); 
})