科普一个监听DOM的对象-MutationObserver

介绍

MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件.

以上这段引自权威牛逼的MDN。（懒得自己写了...）

创建MutationObserver对象

var mo = new MutationObserver(
  function callback
);

参数只有一个，就是回调函数(callback)，当MutationObserver监听到目标变化时会触发这个回调。这个回调参数会被传递两个参数，第一个是包含了若干个变化目标的信息的参数，这些信息集合称为MutationRecord对象；第二个参数则是你创建的这个对象自身。

实例方法

1.observe()：

// 第一个参数是要监听的DOM节点对象，第二是用于配置的对象
observe( Node, option);

其中option对象可配置是否监听目标节点的子节点、是否监听html属性/文本等，可以查看MutationObserverInit的详细介绍

2. disconnect()
停止监听。

3.takeRecords()
清空观察者对象的记录队列,并返回里面的内容

兼容性

MutationObserver兼容情况

一个例子

下面这个例子演示了如何定时插入节点并被监听到，效果点击这里可查看：

    
    
    
    


    
正在监听#wrap