MutationObserver 监听DOM树详细使用

1.选择一个需要观察的节点

var targetNode = document.querySelector('some-id'); // some-id 观察的节点

2.设置observer的配置

var config = {
	attributes: true,
	childList: true,
	subtree: true
};

3.创建一个observer示例与回调函数相关联

var observer = new MutationObserver(callback);

4.当节点发生变化时的需要执行的函数

var callback = function(mutationsList, observer) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

5.使用配置文件对目标节点进行观测

observer.observe(targetNode, config);

6.停止观测

observer.disconnect();

observer方法

MutationObserver使用observe方法进行监听指定的元素节点变化，observe方法接受两个参数

属性	描述	类型
childList	子节点的变动（指新增，删除或者更改）	Boolean
attributes	属性的变动	Boolean
characterData	节点内容或节点文本的变动	Boolean
subtree	表示是否将该观察器应用于该节点的所有后代节点	Boolean
attributeOldValue	表示观察attributes变动时，是否需要记录变动前的属性值	Boolean
characterDataOldValue	表示观察characterData变动时，是否需要记录变动前的值	Boolean

示例引用链接 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver