MutationObserver

作者: 凝黛色 | 来源:发表于2019-03-26 19:23 被阅读0次

dom 修改更新
MutationObserver是什么？
不“知名”API大集合
MutationObserver
MutationObserver
MutationObserver
MutationObserver
js之MutationObserver
MutationObserver、IntersectionObs
MutationObserver用法

MutationObserver 是一个可以监听DOM结构变化的接口。

官方使用方式示例

//选择一个需要观察的节点
var targetNode = document.getElementById('some-id');

// 设置observer的配置选项
var config = { attributes: true, childList: true, subtree: true };

// 当节点发生变化时的需要执行的函数
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.');
        }
    }
};

// 创建一个observer示例与回调函数相关联
var observer = new MutationObserver(callback);

//使用配置文件对目标节点进行观测
observer.observe(targetNode, config);

// 停止观测
observer.disconnect();

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

使用方式详解

<!DOCTYPE html>

<div id="opop">
    <div class="op"></div>
    <div class="op"></div>
    <div class="op op-node-change"></div>
</div>
<!--引用jqery-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>

    var targetNode =document.getElementById('opop');

    var observer = new MutationObserver(function(mutations) {
        var $node = $('#opop .op:not(.op-node-change)');
        $node.addClass('op-node-change test');
        console.log(111111);
    });

    observer.observe(targetNode, { attributes: true, childList: true, subtree: true });

</script>

上述代码是一个简单的应用示例，是在id="opop"下，给所有的没有"op-node-change"的div 增加类"op-node-change test"
这段代码直接运行后的显示