JS 监听元素dom变化

在JavaScript中，可以使用MutationObserver API来监听DOM元素的变化。以下是一个使用MutationObserver的例子：

// 选择目标节点
const targetNode = document.getElementById('myId');
 
// 创建一个观察者对象
const observer = new MutationObserver(function(mutationsList, observer) {
    // 对变化进行处理
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('子元素变化了');
        } else if (mutation.type === 'attributes') {
            console.log('属性变化了');
        }
    }
});
 
// 观察者的配置（观察目标节点的子节点变化和属性变化）
const config = { attributes: true, childList: true, subtree: true };
 
// 传入目标节点和观察选项并开始观察
observer.observe(targetNode, config);
 
// 你可以停止观察
// observer.disconnect();

在这个例子中，我们选择了一个ID为'myId'的元素作为目标节点。然后我们创建了一个MutationObserver实例，并传入了一个回调函数，该函数将在观察到变化时被调用。我们设置了观察配置config来监听目标节点及其所有子节点的变化（包括属性变化和节点增减）。

当你需要停止监听时，可以调用observer.disconnect()方法。