Mutationobserver Monitoring DOM Tree changes

1 overview

Mutation Observer is an API that is used in place of Mutation events as a means to observe changes in the structure of the DOM tree. Why use mutation observer instead of mutation events, let's take a look at mutation events

Mutation Events

Mutation events is an event defined in the DOM3 that listens for changes in the structure of the DOM tree

Its simple usage is as follows:

document.getElementById(‘list‘).addEventListener("DOMSubtreeModified", function(){ console.log(‘列表中子元素被修改‘);}, false);

Mutation Event List

• Domattrmodified
• Domattributenamechanged
• Domcharacterdatamodified
• Domelementnamechanged
• domnodeinserted
• Domnoderemoved
• Domnodeinsertedintodocument
• Domsubtreemodified

Where domnoderemoved,domnodeinserted and domsubtreemodified are used to monitor the deletion of element subkeys, additions, modifications (including deletions and additions),
Domattrmodified is a modification of the listener element's properties and can provide specific modification actions.

Mutation Events Encounter problems

• 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.
• Performance issues
  1.Mutation events is performed synchronously, each time it is called, it needs to be taken out of the event queue, executed, and then removed from the event queue, during which the queue elements need to be moved. If the event is triggered more frequently, each time you need to perform these steps, the browser will be slowed down.
  2.Mutation events itself is an event, so capturing is in the form of event bubbling, and if another mutationevents is triggered during the bubbling capture, there is a good chance of blocking JavaScript threads and even causing the browser to crash.

Mutation Observer

Mutation Observer is defined in DOM4 as a replacement for the new API for Mutation events, which differs from events in that all listening operations and processing are performed asynchronously after the execution of other scripts, and so after the change is triggered, will become recorded in the array, unified callback, that is, when you use observer to listen to multiple DOM changes, and the number of DOM has changed, then Observer will change the changes in the array, waiting to end together, The corresponding callback function is then executed once from the array of changes.

Mutation Observer's browser compatibility range

Compatibility 2 Method Constructors

Used to instantiate a mutation observer object, where the parameter is a callback function that executes the function after the specified DOM node is sent, and is passed two parameters, one is the change record array (Mutationrecord) and the other is the Observer object itself

new MutationObserver(function(records, itself){});

Observe

On the Observer object, register the DOM nodes that need to be observed, and the corresponding parameters

void observe(Node target, optional MutationObserverInit options)

The properties of the optional parameter mutationobserverinit are as follows:

Childlist Observe the new and deleted child nodes of the target node.
attributes Observe the properties node of the target node (a property has been added or deleted, and the property value of a property has changed).
Characterdata If the target node is a characterdata node (an abstract interface, which can be a text node, an annotation node, and a processing instruction node), it is also necessary to observe whether the text content of the node has changed
subtree observe all descendant nodes of the target node (observe the above three node variations on the entire DOM tree that the target node contains)
Attributeoldvalue The property value before the changed attribute node is recorded (recorded in the OldValue attribute of the Mutationrecord object below) If the Attributes property is already set to True
Characterdataoldvalue The Characterdata property is set to True, the text content before the change Characterdata node is recorded ( Log into the OldValue property of the Mutationrecord object below)
Attributefilter A property An array group (you do not need to specify a namespace), only the property names contained in the array will be observed when the properties of the other names change and will be ignored if you want to set those delete parameters.

If you want to use which parameter, set its value to True

Disconnect

Tentatively set the change of nodes on the Observer object to listen until the observe method is called again

Takerecords

Calling Takerecords on the Observer object returns an array of change records (Mutationrecord) on its observation node
Where the Mutationrecord array is also used as the first parameter of the callback function when the Observer initializes
It contains the following properties:

type If the attribute changes, returns attributes. If a characterdata node changes, the Characterdata is returned, and if a child node of the target node has changed, the Childlist .
target Returns the node affected by this change, specifically returning that node type is different depending on the type value, and if type is attributes, returns the element node where the changed attribute node is located, If the type value is Characterdata, the Characterdata node that has changed is returned. If type is childlist, the parent node of the child node that changed is returned.
addednodes Returns the node being added
removednodes Returns the node that was deleted
previoussibling Returns the previous sibling node of the node that was added or deleted
nextSibling Returns the last sibling node of the node that was added or deleted
attributename Returns the local name of the change property
OldValue The value returned differs depending on the type value. If type is attributes, the property value before the property change is returned. If Type is Characterdata, Returns the text data before the node changes. Returns null if Type is Childlist

3 usage Examples

Firefox and Chrome are prefixed with previous versionsvar mutationobserver =Window. Mutationobserver | |Window. Webkitmutationobserver | |Window. MozmutationobserverSelect Target Nodevar target =document.queryselector ( ' #some-id '); //create observer object var observer = new Mutationobserver (function ( Mutations) {Mutations.foreach (function ( mutation) {console.log (Mutation.type);}); }); //Configuration observation Options: var config = {attributes: true, Childlist: true, Characterdata: true} //incoming target node and observation option Observer.observe (target, config); //then you can stop observing observer.disconnect ();         

4 Reference Links

[1]. MDN Mutation Observer
[2]. Migrating Mutation events and property change events to mutation observer

Wen/falm (author of Jane's book)
Original link: http://www.jianshu.com/p/b5c9e4c7b1e1
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

Mutationobserver Monitoring DOM Tree changes