window监听节点改变的接口

监听页面某个元素的属性变化

window.MutationObserver（callback）

Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。MutationObserver是一个构造器，接收一个回调函数callback用来处理节点变化时所做的操作.

要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。

Mutation Observer有以下特点：

它等待所有脚本任务完成后，才会运行，即采用异步方式
它把DOM变动记录封装成一个数组进行处理，而不是一条条地个别处理DOM变动。
它即可以观察发生在DOM节点的所有变动，也可以观察某一类变动

一般写法：

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

const observer = new MutationObserver(mutationCallback);

MutationObserver对象有三个方法，分别如下：

observe：设置观察目标，接受两个参数：target：观察目标，config：设置观察选项

　　　　　　observer.observe(dom, config);// 后面介绍config的配置

　　　　2. disconnect：取消对目标节点的监听。

　　　　　　observer.disconnect();

　　　　3. takeRecords：取出记录队列中的记录。它的一个作用是当你不想对节点变化立刻做出反应，过段时间再显示改变了节点的内容。

　　　　　　takeRecords方法用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

　　　　　　var record = observer.takeRecords();

　　　　4. config配置（只介绍常用的几个）：

　　　　　　let config = {
　　　　　　　　attributes: true, //目标节点的属性变化
　　　　　　　　childList: true, //目标节点的子节点的新增和删除
　　　　　　　　characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化，节点内容或节点文本的变动
　　　　　　　　subtree: true, //表示是否将该观察器应用于该节点的所有后代节点

　　　　　　　　attributeOldValue: true, // 表示观察attributes变动时，是否需要记录变动前的属性值

　　　　　　　　characterDataOldValue: true, // 表示观察characterData变动时，是否需要记录变动前的值

　　　　　　　　attributeFilter: [] // 表示需要观察的特定属性,如['class','src']
　　　　　　};
　　　　5. callback 回调

　　　　　　返回参数mutationsRecord数组, instance

　　　　　　MutationRecord对象:

　　　　　　DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。

　　　　　　MutationRecord对象包含了DOM的相关信息，有如下属性：

　　　　　　　　type：观察的变动类型（attribute、characterData或者childList）。

　　　　　　　　target：发生变动的DOM节点。

　　　　　　　　addedNodes：新增的DOM节点。

　　　　　　　　removedNodes：删除的DOM节点。

　　　　　　　　previousSibling：前一个同级节点，如果没有则返回null。

　　　　　　　　nextSibling：下一个同级节点，如果没有则返回null。

　　　　　　　　attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。

　　　　　　　　oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null

示例：

//获取元素

var box = document.getElementById("box");

//配置选项

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

var observer = new MutationObserver(function (mutationsList, observer) {

    for (var mutation of mutationsList) {

        if (mutation.type == 'childList') {

            console.log('子元素被修改');

        }

        else if (mutation.type == 'attributes') {

            console.log(mutation.attributeName + '属性被修改');

        }

    }

});

//开始观测

observer.observe(box, config);

//停止观测

// observer.disconnect();

box.className = "active"

box.innerHTML = "哈哈哈"

巴特西

window监听节点改变的接口

window.MutationObserver（callback）

最新文章

热门文章