你所不知道的MutationObserver

简介

MutationObserver是html5的api，功能就是用来监听dom的变动，有点相似事件监听。
MutationObserver与事件监听本质上的不同是事件触发是同步，而MutationObserver会等待当前所有dom操作完成后再触发。

用法

MutationObserver是一个构造函数，接受一个用来解决节点变化的回调函数作为参数，如下：

var observer = new MutationObserver(function(mutations) {      //dosomething    })

函数的第一个参数是dom变动数组，每个元素都记录了它的类型和发生变化的信息。

创立的对象有三个方法：

• observe 启动监听
• disconnect 结束监听
• takeRecords 清空记录队列并返回里面的内容

observe

observe方法用来启动监听，它接受两个参数，target：需要观察目标，options：通过对象成员来设置观察选项(属性、子dom、文本等)

options有以下几个选项:

• childList ： 表示观察目标子节点的变化，比方增加或者者删除子节点，不包括修改以及子节点后代的变化。
• attributes ：观察属性的变化。
• characterData： 观察数据的改变。
• subtree： 观察目标及后代的改变。
• attributeOldValue：假如属性为true或者者省略，则相当于设置为true，表示需要记录改变前的目标属性值，设置了attributeOldValue可以省略attributes设置。
• characterDataOldValue ：假如characterData为true或者省略，则相当于设置为true，表示需要记录改变之前的目标数据，设置了characterDataOldValue可以省略characterData设置。
• attributeFilter：假如不是所有的属性改变都需要被观察，并且attributes设置为true或者者被忽略，那么设置一个需要观察的属性本地名称（不需要命名空间）的列表。

现有以下以下dom：

<div class="outer">    <div class="inner">inner</div></div>

对class为outer的dom元素启动监听：

var mutationobserve = new  MutationObserver(function(mutations) {      //mutations是变动数组      mutations.forEach((item) => {            console.log(item);      })})var outer = document.querySelector('.outer');mutationobserve.observe(outer,  {      childList: true,      attributes: true,      characterData: true,      subtree: true,      attributeOldValue: true,      characterDataOldValue: true})

而后移除outer的子元素inner：

  outer.removeChild(outer.firstChild);

输出结果如下：

image.png

takeRecords

takeRecords用来取出记录队列中的记录，同时清理记录队列中的内容。

 outer.appendChild(document.createTextNode('新添加Text节点'));  //清空记录队列，此时没有输出 var record = mutationobserve.takeRecords();     outer.appendChild(document.createTextNode("子节点2"))

结果只有第二个变动才触发了输出：

image.png

以下是没有takeRecords的情况：

image.png

disconnect

最后，需要通过disconnect中止对dom的监听：

mutationobserve.disconnect();

异步

MutationObserver的回调函数是异步的，只有在一律DOM操作完成之后才会调用。

  var i = 0;  var mutationobserve=new MutationObserver(function (mutations) {      i++;  });  mutationobserve.observe(outer,{ childList: true});  outer.appendChild(document.createTextNode('text1'));  outer.appendChild(document.createTextNode('text2'));  console.log(i) 

结果会输出0

image.png

再输出一次i，i等于1

image.png

验证了MutationObserver会等待当前所有dom操作完成后再触发。