🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 概述 * 它等待所有脚本任务完成后,才会运行(即异步触发方式)。 * 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。 * 它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。 ## 构造函数 ``` var observer = new MutationObserver(function (mutations, observer) { mutations.forEach(function(mutation) { console.log(mutation); }); }); ``` 参数一是变动数组,参数二是观察器实例 ## 实例 ### observe() * 第一个参数:所要观察的 DOM 节点 * 第二个参数:一个配置对象,指定所要观察的特定变动 ```. var article = document.querySelector('article'); var options = { 'childList': true, 'attributes':true } ; observer.observe(article, options); ``` option选项: * `childList`*:子节点的变动(指新增,删除或者更改)。 * `attributes`:属性的变动。 * `characterData`:节点内容或节点文本的变动。 * `subtree`:布尔值,表示是否将该观察器应用于该节点的所有后代节点。 * `attributeOldValue`:布尔值,表示观察`attributes`变动时,是否需要记录变动前的属性值。 * `characterDataOldValue`:布尔值,表示观察`characterData`变动时,是否需要记录变动前的值。 * `attributeFilter`:数组,表示需要观察的特定属性(比如`['class','src']`)。 多次添加同一个观察器是无效的,回调函数依然只会触发一次。但是,如果指定不同的`options`对象,就会被当作两个不同的观察器 ### disconnect() 停止观察 `observer.disconnect(); ` ### takeRecords 清楚变动记录 返回变动记录的数据 `observer.takeRecords(); ` 清除变动记录 ``` // 保存所有没有被观察器处理的变动 var changes = mutationObserver.takeRecords(); // 停止观察 mutationObserver.disconnect(); ``` ## MutationRecord 对象 * `type`:观察的变动类型(`attributes`、`characterData`或者`childList`)。 * `target`:发生变动的DOM节点。 * `addedNodes`:新增的DOM节点。 * `removedNodes`:删除的DOM节点。 * `previousSibling`:前一个同级节点,如果没有则返回`null`。 * `nextSibling`:下一个同级节点,如果没有则返回`null`。 * `attributeName`:发生变动的属性。如果设置了`attributeFilter`,则只返回预先指定的属性。 * `oldValue`:变动前的值。这个属性只对`attribute`和`characterData`变动有效,如果发生`childList`变动,则返回`null`。