MutationObserver is a Web API built-in object that is an observer object that listens for changes to a specified DOM node. Exists by default and is compatible with almost all browsers above IE11.

create

Callback is created as an instance, with a single argument that specifies the callback function when the object triggers the change event:

const callback = records= > { console.log(records) }
const observer = new MutationObserver(callback)

// Observe all changes except for features
observer.observe(ele, {
  childList: true.// Observe the direct child node
  subtree: true.// and lower descendant nodes
  characterDataOldValue: true // Pass old data to the callback
});

/** Records example [{addedNodes: NodeList [] attributeName: null attributeNamespace: null nextSibling: null oldValue: "bold" previousSibling: null removedNodes: NodeList [] target: text type: "characterData" }] **Copy the code

methods

So how do you specify how to listen for DOM elements? The observer instance has three methods to implement related operations:

  • observe(target, MutationObserverInit): Sets the listening object,targetIs a goalNodeObject, and the second argument is aMutationObserverInitListening parameter object
  • disconnect(): Stop listening. Invoke observe again
  • takeRecords(): Deletes the listener notification queue and returns the current queue as an arrayMutationRecordObject to retrieve the remaining events before stopping listening

Monitoring parametersMutationObserverInit:

  • Monitoring scope
    • childListBoolean, whether to monitor the target nodeAnd its child nodesChange to defaultfalse
    • subtreeBoolean, whether to listen to the target nodeAnd all descendant nodesChange to defaultfalse
  • Monitor properties
    • attributesBoolean, whether to listen for attribute value changes, defaultfalse
    • attrbuteFilter, string[], specifies the range of listening properties
    • attributeOldValue, Boolean, whether to return the old attribute value
  • Listen to the text
    • characterData, Boolean, whether to listen for #textThe text contentThe change of
    • characterDataOldValueBoolean, whether to return old #textThe text content

The response objectMutationRecord:

Callback (Records) is triggered with an array of Records in the MutationRecord object to tell the developer what the DOM change is:

  • typeChange the type
    • ‘attributes’ properties
    • ‘characterData’ text
    • ‘childList’ adds/deletes child nodes
  • targetChange occurring element
  • addedNodes/removedNodesNodes added or deleted
  • previousSibling/nextSiblingThe upper/next node of the added/deleted node
  • attributeName/attributeNamespaceName/namespace of the property being changed (for XML)
  • oldValuePrevious value (property/text), if setattributeOldValue/characterDataOldValueWill appear

Here’s a more complete example:

<div contentEditable id="elem">Click and <b>edit</b>, please</div>

<script>
let observer = new MutationObserver(mutationRecords= > {
  console.log(mutationRecords); // console.log(the changes)
});

// Observe all changes except for features
observer.observe(elem, {
  childList: true.// Observe the direct child node
  subtree: true.// and lower descendant nodes
  characterDataOldValue: true // Pass old data to the callback
});
</script>
Copy the code

The above. Original is not easy, would like to turn first inform, welcome to add my exchange: Cassius