MutationObserver

MDN传送门

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
    <div class="btn-next disabled" onclick="clickMe()">clickMe</div>
</body>
</html>

点击clickMe删除disabled，代码省略

// 选择监听的dom节点
var targetNode = document.querySelector('.btn-next');

// 监听的配置
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    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.');
        }
    }
};

// 创建一个监听实例，绑定回调
var observer = new MutationObserver(callback);

// 开始根据配置监听节点
observer.observe(targetNode, config);

// 最后断开监听
observer.disconnect();

元素的属性监听

MutationObserver