MutationObserver DOM变化的观察

2022-12-05 11:05:55

简单的给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的兼容性如下：

嗯，还算行...

码农公寓

相关文章