使用JavaScript的MutationObserver实时监测DOM变化

摘要

MutationObserver可以用来监测DOM树中的节点变化，并在变化发生时执行相应的操作。也可以观察到节点的属性变化、子节点的增删以及其他相关变化
demo-http://blog.example.hizhiji.com/#/example?post=21

demo-http://blog.example.hizhiji.com/#/example?post=21

使用MutationObserver

1.创建一个MutationObserver对象，并传入一个回调函数作为参数

// 创建一个MutationObserver对象
var observer = new MutationObserver((mutationRecoard,observe) =〉〉 {
    //mutationRecoard：存放所有dom变化的数组
    //observe：观察者实例
});

2.使用observe()方法来指定需要观察的DOM节点和观察的选项。例如，可以指定要观察的子节点变化、属性变化、文本内容等。

// 需要观察的目标节点
var targetNode = document.getElementById('myDiv');

// 观察配置项
var config = { childList: true };

// 使用MutationObserver开始观察目标节点
observer.observe(targetNode, config);

配置项的详细属性如下：

属性	类型	含义
childList	Boolean	子节点的变动（指新增，删除或者更改）
attributes	Boolean	属性的变动
characterData	Boolean	节点内容或节点文本的变动
subtree	Boolean	表示是否将该观察器应用于该节点的所有后代节点
attributeOldValue	Boolean	表示观察attributes变动时，是否需要记录变动前的属性值
characterDataOldValue	Boolean	表示观察characterData变动时，是否需要记录变动前的值
attributeFilter	Array	表示需要观察的特定属性（比如[‘class’,‘src’]）

3.当指定的DOM节点发生变化时，MutationObserver对象会执行回调函数，并提供一个MutationRecord对象作为参数，该对象包含有关变化的详细信息。

属性	含义
type	观察的变动类型（attribute、characterData或者childList）
target	发生变动的DOM节点
addedNodes	新增的DOM节点
removedNodes	删除的DOM节点
previousSibling	前一个同级节点，如果没有则返回null
nextSibling	下一个同级节点，如果没有则返回null
attributeName	发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性
oldValue	变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null

4.MutationObserver方法

方法名	参数	含义
observe()	targetNode, config	开始观察目标节点
disconnect()		停止MutationObserver 实例继续观察
takeRecords()		停止MutationObserver 从观察队列中移除所有待处理的记录

5.全部代码

// 创建一个MutationObserver对象
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'childList') {
      console.log('子节点发生变化');
    }
  });
});

// 需要观察的目标节点
var targetNode = document.getElementById('myDiv');

// 观察选项
var config = { childList: true };

// 使用MutationObserver开始观察目标节点
observer.observe(targetNode, config);

在上述示例中，创建了一个MutationObserver对象，并传递了一个回调函数作为参数。回调函数中使用forEach()循环遍历每个触发的变化，并通过type属性判断是否是子节点的变化。如果是，则输出相应的提示信息。