js中检测dom节点属性、class名称、内容等变化

2021-04-07

阅读：52

js中检测dom节点属性、class名称、内容等变化

MutationObserver的使用

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。

// 选择需要观察变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let 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.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后，可停止观察
observer.disconnect();

例如，检测dom节点class类名的改变

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box{
            background: red;
            width: 500px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #FFFFFF;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <div id="box" class="box">我是box</div>
    <button type="button" onclick="addClass()">点击</button>
    <script>
        var el = document.getElementById("box");
        function addClass(){
            el.classList.add('active');
        }
        // 选择需要观察变动的节点
        const targetNode = document.getElementById('box');

        // 观察器的配置（需要观察什么变动）
        const config = { attributes: true, childList: true, subtree: true };

        // 当观察到变动时执行的回调函数
        const callback = function(mutationsList, observer) {
            // Use traditional 'for loops' for IE 11
            for(let mutation of mutationsList) {
                if (mutation.type === 'childList') {

                }
                else if (mutation.type === 'attributes') {//属性改变了
                    console.log(mutation);
                    let classList = el.classList;
                    console.log(classList);
                }
            }
        };

        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);

        // 以上述配置开始观察目标节点
        observer.observe(targetNode, config);

        // 之后，可停止观察
        //observer.disconnect();
    </script>
</body>
</html>

点击按钮，观察器会触发callback回调，我们可以在对应的变更类型判断里，对事件进行相应的处理

搜索一下

加入前端e栈