MutationObserverAPI--微任务

1. 作用

MutationObserverAPI可以看作一个监听DOM所有变化（包含节点、属性、文本内容的变动）的接口。

和EventTargetAPI的addEventListener相比：

共同点: 两者的回调函数执行都是异步任务，都要在主执行栈之后执行；

不同点：

1. addEventListener的回调函数会进入宏任务队列；

MutationObserver的回调函数会进入微任务队列

2.addEventListener的触发方式是同步触发；比如，点击后，回调函数立即进入宏任务队列。

MutationObserver的监听是异步触发，在所有的DOM操作完成后才触发使回调函数进入微任务队列。

比如，程序中有10个修改DOM的操作，只有在第十个处理完之后，回调函数才进入微任务队列。

    const observer = new MutationObserver(function (mutations, observer) {
      console.log(mutations);//[{type: 'childList',.....}]
    })
    observer.observe(root, {
      childList: true,
      subtree: true
    })
    const p = Promise.resolve();
    root.appendChild(document.createElement('div')); 
    // DOM操作执行完成，触发观察回调
    p.then(() => {
      console.log('d')
    })
// 运行结果
d
[{type:  .......}]

2. 使用

MutationObserver，顾名思义，是变化观察器。它是一个构造函数，使用时需要创建实例对象，生成一个观察器。

// callback是监听回调函数，当主执行栈结束后触发
// 第一个参数是所有变化产生的变化对象的一个数组，第二个参数是观察器本身
const observer = new MutationObserver(function(mutations, observer) {
});

DOM变化会产生一条变化记录，它是一个MutationRecord对象的实例。

上面的mutations是MutationRecord实例对象的一个集合。

它包含以下属性：

target: 当前变化的节点
type: 变化类型；包含charactorData,childList, attributes三种
addNodes: 新增的节点； 默认[]
removeNodes: 删除的节点;默认[]
previousSibling: 前一个同级节点； 默认null
nextSiblings: 后一个同级节点；默认null
attributeName: 发生变化的属性
oldValue: 变化前的值

MutationObserver.prototype.observe是一个实例方法，用来启动监听器，并指定监听对象，设置监听参数。

所以该方法的调用一定要在所有的DOM操作的最上方，否则监听不到变化。

observer.observer(element, options);

element:

监听的DOM对象

options：

指定观察的具体内容：（3个至少指定一个，否则报错）对应的值都是布尔值。

1. childList (子节点)

还有对应该配置的补充配置：subtree，指定是否是所有的后代节点

2. attributes (属性)

还有对应该配置的补充配置：

attributeOldValue:指定是否记录观察前的属性值

attributeFilter: 一个数组，指定观察的属性值

3. charactorData(节点内容)

还有对应该配置的补充配置：

charactorDataOldValue：指定是否记录变化前的节点内容

示例：

  <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. 实例方法

1.disconnect()

该方法调用后，关闭监听

2.takeRecords()

删除未处理的变化

4. 应用

1. 观察节点和属性的变化

2.取代DOMContentLoaded事件