MutationObserverAPI-- micro-task

1. Role

MutationObserverAPI can be seen as a listener WebAPI DOM event of any change.

And the ordinary listener function is different, MutationObserverAPI monitor is an asynchronous task, triggered when the DOM is complete.

DOM changes: contains, property, change the text content of the node.

    Observer = const new new MutationObserver ( function (mutations, Observer) { 
      the console.log (mutations); // [{type: 'childList', .....}] 
    }) 
    observer.observe (the root, { 
      childList: to true , 
      subtree: to true 
    }) 
    const P = Promise.resolve (); 
    root.appendChild (document.createElement ( 'div' )); 
     // the DOM operation execution is completed, trigger callback observed 
    p.then (() => { 
      the console.log ( 'D' ) 
    }) 
// operation result 
D 
[{type: .......}]

2. Use

MutationObserver, by definition, is the viewer changes. It is a constructor, need to create an instance use, generate a viewer.

// the callback is listening callback function, when the end of the main trigger execution stack 
// The first parameter is an array changing objects produced all changes, the second parameter is a view itself 
const Observer = new new MutationObserver ( function (mutations, Observer ) { 
});

DOM changes will produce a change record, which is an instance of an object MutationRecord.

The above mutations is a collection of objects MutationRecord instance.

It contains the following properties:

target: the current changes node 
type: the type of change; contains charactorData, childList, attributes three kinds 
addNodes: The new node; the default [] 
removeNodes: nodes removed; the default [] 
previousSibling: previous sibling node; default null 
nextSiblings: after a peer node; the default null 
attributeName: attribute changes 
oldValue: value before change

MutationObserver.prototype.observe example is a method used to start the listener, and the listener object is specified, the parameter setting monitor.

So call the method must be uppermost in all of the DOM, otherwise no change monitor.

observer.observer(element, options);

element: 

Listening DOM object

options：

Specifies the specific content observed: (3 specify at least one, otherwise an error) the corresponding values ​​are Boolean.

1. childList (child node)

   There are complementary configuration should be configured: subtree, specify whether all the descendant nodes

2. attributes (attributes)

   There should be configured to complement the configuration:

   attributeOldValue: Specifies whether the attribute value before recording observation

   attributeFilter: an array of attribute values ​​specified observation

3. charactorData (node ​​content)

    There should be configured to complement the configuration:

    charactorDataOldValue: Specifies whether to record the contents of the node before the change

Example:

  <div id="root"></div>
  <script type="module">
    const observer = new MutationObserver(function (mutations, observer) {
      console.log(mutations);//[{type: 'childList',.....}]
    })
    observer.observe(root, {
      childList: true,
      subtree: true
    })
    root.appendChild(document.createElement('div'))
  </script>

3. Examples of the method

1.disconnect()

After the method call, turn off monitor

2.takeRecords ()

Delete untreated change

4. Applications

1. Changes in properties observed node and

2. replace DOMContentLoaded event