Mutation events

Mutation events are defined in DOM3 and are used to listen for changes in the DOM tree structure.

Document.getElementById (' List ').addEventListener(" domSubtreeModified ", function(){console.log(' List neutron element modified '); }, false);

Mutation event list

1. DOMAttrModified: Obtain the attribute node of the target node (an attribute has been added or deleted, and the attribute value of an attribute has changed). 2. DOMAttributeNameChanged 3. DOMCharacterDataModified: if the target node of characterData nodes (an abstract interface, for specific text node, that comment node, the node) and a processing instruction, also want to observe whether the text content of the node changes. 4. DOMElementNameChanged 5. DOMNodeINSERTED: Fired when the target node is inserted as a child node into another node. 6. DomNodeMoved: Triggered when the target node is removed from its parent. 7. DOMNodeInsertedIntoDocument: in a node is inserted into the document directly or indirectly by subtree is inserted into the document after the trigger. This event is fired after a DOMNodeINSERTED. 8. DOMSubtreeModified: Triggered when any changes occur in the target DOM structure;

Browser compatibility issues IE9 does not support Mutation Events The WebKit kernel does not support the DomattrModified feature. DomelementNameChanged and DomAttributeNameChanged are not supported on Firefox. Mutation Events are executed synchronously. Each invocation of Mutation Events needs to retrieve an event from the event queue, execute it, and then remove it from the event queue, during which queue elements need to be moved. If events are fired frequently, and each of these steps needs to be performed, the browser will be slowed down. 2. MutationEvents are Events and can bubble, so MutationEvents are captured in the form of event bubbles. If additional mutationEvents are triggered during the bubble capture, it is possible that the JavaScript thread will block or even crash the browser.

MutationObserver

A Mutation Observer is defined in DOM4 as a new API that replaces Mutation events. Unlike Events, all listening operations and corresponding processing are performed asynchronously after the execution of other scripts, and after all changes are triggered. In other words, if you use an observer to listen for multiple DOM changes, and the DOM changes occur, the observer will record the changes in the change array, wait for them all to finish, and then execute the corresponding callback function from the change array once.

Browser compatibility range for Mutation Observer

The constructor

A Mutation observer object is instantiated with a callback function that executes the change after the specified DOM node sends the change, and is passed in a mutationRecord array and the observer object itself. A MutationRecord is used to instantiate a Mutation observer object

const mutationObserver = new MutationObserver(function(records, itself){});

observe

On the Observer object, register the DOM node to be observed, along with the corresponding parameters

mutationObserver.observe(Node target, optional MutationObserverInit options)

The optional mutationObserverInit parameter has the following properties:

ChildLIst watches the addition and deletion of children of the target node. Attributes looks at the attribute node of the target node (an attribute has been added or removed, and the attribute value of an attribute has changed). If the target node is a characterData node (an abstract interface that can be a text node, a comment node, or a processing instruction node), the subtree is also observed to see if the text content of the characterData node changes Obtain all the descendants of the target node (observe the above three node changes in the entire DOM tree contained by the target node) attributeOldValue Record the attribute value prior to the changed attribute node (in the oldValue property of the MutationRecord object below) CharacterDataoldValue With the CharacterData property set to true, record the text content before the CharacterData node changes (in the oldValue property of the MutationRecord object below) attributeFilter An array of attribute names (no namespace required) that is only observed when the attribute names contained in the array change and ignored when other attribute names change. If you want to set deleted parameters, set them to true if you want to use any of them

disconnect

Tendently monitor changes in the node set on the observer object until the observe method is called again

takeRecords

The takeRecord () method of the MutationObserver returns a list of all matched DOM changes that have been detected but have not been processed by the observer’s callback function (because the MutationObserver handles callbacks asynchronously), leaving the change queue empty. The most common use scenario for this method is to get a record of all unprocessed changes immediately before disconnecting the observer so that any unprocessed changes can be processed when the observer is stopped.

var targetNode = document.querySelector("#someElement");
var observerOptions = {
  childList: true,
  attributes: true
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);


var mutations = observer.takeRecords();

if (mutations) {
  callback(mutations);
}

observer.disconnect();

MutationRecord

It contains the following attributes

1. Type returns Attributes if an attribute has changed. Returns characterData if a characterData node has changed, and childlist.2.target if a child of the target node has changed Returns the character of the node affected by the change. The node type is different according to the type value. If the type is Attributes, then returns the element node of the attribute node where the change occurred Ta node. If the type is childList, then the parent of the changed child node is returned. 3. AddedNodes returns the addedNodes 4. RemovedNodes returns the removedNodes 5 NextSibling returns the last sibling of the added or deleted node 7. AttributeName returns the local name of the changed attribute 8. The oldValue will return different values according to the type value. If type is Attributes, the value of the attribute before the attribute changed is returned. If the type is characterData, the text data before the node changes is returned. If type is childList, null is returned

Using the instance

/ / Firefox and Chrome early version with prefix var MutationObserver = window. MutationObserver | | window. WebKitMutationObserver | | Window. MozMutationObserver/var/select the target node target = document. QuerySelector (' # some - id); Var observer = new MutationObserver(function(mutations) {mutations (mutations) { console.log(mutation.type); }); }); Var config = {attributes: true, childList: true, characterData: True} // pass in the target node and observe option observer.observe(target, config); // Then, you can also stop observing observer.disconnect();