Powerful DOM change observer MutationObserver and mutationobserver

Powerful DOM change observer MutationObserver and mutationobserver

Before that, DOM3 provided the Mutation events event

You can listen to attributes, text content, node insertion and deletion, child node changes, and other events. However, the W3C event is obsolete. Although some browsers still support this event, it is not recommended.

MutationObserver currently supports IE11 + and the latest version of other browsers. You can use the following code to determine whether the service is supported:

var MutationObserver = window.MutationObserver ||    window.WebKitMutationObserver ||    window.MozMutationObserver;var supportMutationObserver = !!MutationObserver;

 

Use the following

var mo = new MutationObserver(callback);var div = document.querySelector('div');var options = {    'childList': true,    'arrtibutes': true};mo.observer(div, options);

 

Options is the configuration parameter. The configuration here shows the sub-elements and changes of the div element.

Options has the following options:

 

When a change occurs, the callback function will pass in the MutationRecord object of the change record. The MutationRecord contains DOM-related information and has the following attributes:

 

Example 1: Observe the changes of child elements

function callback(records) {  records.forEach(function(record) {    console.log(record)  })}var ob = new MutationObserver(callback)ob.observe(app1, {  childList: true,  subtree: true})

P1

App1

The configuration item childList indicates the child element, and the subtree indicates the child element. Enter the following code in the browser console on this page to test

App1.removeChild (p1)

App1.appendChild (document. createTextNode ('test '))

 

 

Example 2: Observe attribute changes

function callback2(records) {  records.forEach(function(record) {    console.log(record)  })}var ob2 = new MutationObserver(callback2)ob2.observe(app2, {  attribute: true,  attributeOldValue: true})

App2

Configure the parameter to track attribute changes ('tes buckets': true), and set the value before the change. The value before the change is displayed on the console. Open the browser console on this page and enter the following code to test

App2.id = 'apptest'

 

Example 3: Observe the changes of text elements

function callback3(records) {  records.forEach(function(record) {    console.log(record)  })}var ob3 = new MutationObserver(callback3)ob3.observe(app3, {  characterData: true})

 

Example 3: Observe the changes in the element content

function callback3(records) {  records.forEach(function(record) {    console.log(record)  })}var ob3 = new MutationObserver(callback3)ob3.observe(app3, {  childList: true,  characterData: true,  characterDataOldValue: true})

Old value

 

The configuration items observe the changes in the element text, and the old text elements are recorded when the changes are made. Open the browser console on this page and enter the following code to test

App3.appendChild (document. createTextNode ('hello '))

 

Related:

Https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

Https://dev.opera.com/articles/mutation-observers-tutorial/

Http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html