MutationObserver DOM变化的观察

简介: 简单的给MutationObserver做个测试及总结笔记。MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果。可适用的需求:开发者在DOM变化过程中的debug、根据页面变化处理不同的资源、拦截网页是否被注入动态内容加载的脚本等等.

简单的给MutationObserver做个测试及总结笔记。

MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果。

可适用的需求:开发者在DOM变化过程中的debug、根据页面变化处理不同的资源、拦截网页是否被注入动态内容加载的脚本等等...

简单的案例代码如下,比如观察属性变化:

<button id="J_click">click</button>
<div id="J_dom" data-num="1">hello</div>
<script>
    var dom = document.getElementById('J_dom');

    var domObservable = new MutationObserver(function (mutationRecord) {
        console.log('mutationRecord : ', mutationRecord)
    });

    document.getElementById('J_click').addEventListener('click', domChange, !1);
    
    domObservable.observe(dom, {
        attributes: true,
        attributeOldValue: true
    })

    function domChange() {
        dom.setAttribute('data-num', +(dom.getAttribute('data-num')) + 1);
    }
</script>

点击"click"按钮,J_dom的data-num属性从0变为1。控制台输出如下MutationRecord对象列表:

 

MutationObserver 构造函数需要传入一个回调函数用以执行观察到DOM变化后需要做的操作,回调函数以MutationRecord对象列表作为参数。

MutationRecord对象列表

MutationRecord对象包含以下属性:

1. type,DOM变化的类型,DOM属性变化为"attributes";DOM内数据变化为"characterData";子节点树结构变化为"childList";

2. target,如果如果type不为"childList",则代表发生变化的节点;如果type为"childList",则是被操作子节点(新增或删除)的父节点;

3. addedNodes,被观察的DOM内新增的节点列表;

4. removedNodes,被观察的DOM内移除的节点列表;

5. previousSibling,被添加或移除节点之前的兄弟节点;

6. nextSibling,被添加或移除节点之后的兄弟节点;

7. attributeName,被修改属性的属性名;

8. attributeNamespace,被修改属性的命名空间;

9. oldValue,旧值,根据type而返回对应的旧属性或旧数据。

观察者(观察对象)

观察者对象上存在3个操作方法:observe、takeRecords、disconnect。

observe方法指定一个被观察的DOM,配置该节点内的哪些变化需要被观察。方法使用如下: 

var domObservable = new MutationObserver(function (mutationRecord) {
    // 变化后的处理代码
});

domObservable.observe(/* 被观察的DOM */, /* 配置参数 */{
    subtree: false,  // 观察范围是否包含子节点的变化,true则包括,false则不包括
    childList: false,  // 被观察的节点的子节点变化,true则观察,false则不观察
    attributes: false,  // 被观察的节点的属性变化,true则观察,false则不观察
    attributeOldValue: false,  // MutationRecord对象上是否返回被观察的节点的属性变化之前的旧值,true则返回,false则不返回
    attributeFilter: [/* 指定被观察的属性列表 */],  // attributes为true时生效,比如设置了列表为['class'],则只观察class的变化
    characterData: false,   // 被观察的节点的数据变化,true则观察,false则不观察
    characterDataOldValue: false  // MutationRecord对象上是否返回被观察的节点的数据变化之前的旧值,true则返回,false则不返回
});
/**
  * 注意:
  * 在attributes未被配置的情况下,如果attributeOldValue为true或者attributeFilter被设置,则attributes默认为true。
  * 在characterData未被配置的情况下,如果characterDataOldValue为true,则characterData默认为true。
  */

takeRecords方法返回当前操作后的MutationRecord对象列表。方法使用如下:

<button id="J_takeRecords">take records</button>
<div id="J_dom" data-num="1">
    <span id="J_words">0</span>
    <div id="J_subDom"></div>
</div>
<script>
    var value = 0;
    var operateDom = document.getElementById('J_dom');
    var wordsDom = document.getElementById('J_words');
    var takeRecordsBtn = document.getElementById('J_takeRecords');

    takeRecordsBtn.addEventListener('click', takeRecords, !1);

    function takeRecords() {
        console.log('%c both change attribute and subtree', 'color:blue');
        operateDom.setAttribute('data-num', +(operateDom.getAttribute('data-num')) + 1);
        wordsDom.innerText = wordsDom.innerText === '0' ? '' : '0';
        var result = domObservable.takeRecords();
        console.log(result);
    }

    var domObservable = new MutationObserver(function (mutationsList) {
        console.log('mutationsList ', mutationsList);
    })

    domObservable.observe(operateDom, {
        subtree: true,
        attributes: true,
        attributeOldValue: true,
        characterData: true,
        characterDataOldValue: true
    });
</script>
<!-- 点击"take records"按钮,J_dom的data-num属性从0变为1,J_words里的0变成零 -->
<!-- 分别为一次attrbutes和一次characterData变化,takeRecords方法被调用返回一个包含两次变化的MutationRecord对象列表。
-->

disconnect方法移除该观察者上的所有观察并清空该对象的MutationRecord对象列表。

最后,MutationObserver的兼容性如下:

嗯,还算行...

 

相关文章
|
8月前
|
Web App开发 JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(1)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(1)
|
8月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(2)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(2)
|
8月前
|
Web App开发 JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(3)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(3)
|
JavaScript API
js:MutationObserver监视 DOM 节点的变化
js:MutationObserver监视 DOM 节点的变化
126 0
js:MutationObserver监视 DOM 节点的变化
MutationObserver监视DOM树
MutationObserver监视DOM树
|
JavaScript API
MutationObserver - 监听你的 DOM 是否有变动
MutationObserver 可用来监视 DOM 的变化,算是一个比较老的 API,但是却鲜为人知,他的前身是 MutationEvent:一系列监听 DOM 变更的 event 事件 - DOMAttrModified、DOMNodeInserted、DOMSubtreeModified 等。
|
Web App开发 JavaScript 前端开发
JavaScript是如何工作的:使用MutationObserver跟踪DOM的变化
摘要: 掌握MutationObserver。 原文:JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化 作者:前端小智 Fundebug经授权转载,版权归原作者所有。
15045 0
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
9天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
8天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
11 2