MutationObserver所有dom节点的变化-Go服务器开发

MutationObserver 是一个内置的 JavaScript 对象，可以用来监听 DOM 的变化。它非常适合用于观察 DOM 树中的节点添加、删除或属性的变化等。

下面是一个示例，展示如何使用 MutationObserver 来观察所有类型的 DOM 变化：

// 选择要观察的目标节点
const targetNode = document.getElementById('your-target-node-id');

// 创建一个配置对象，指定我们想要观察的变化类型
const config = {
    childList: true, // 观察子节点的增加与删除
    attributes: true, // 观察属性的变化
    subtree: true, // 如果为 true，则会递归地检查后代节点
    characterData: true // 监视文本内容的更改（仅适用于文本节点）
};

// 创建 MutationObserver 实例并传入回调函数
const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('子节点发生了变化');
            if (mutation.addedNodes.length) {
                console.log('添加了这些子节点:', mutation.addedNodes);
            }
            if (mutation.removedNodes.length) {
                console.log('移除了这些子节点:', mutation.removedNodes);
            }
        } else if (mutation.type === 'attributes') {
            console.log(`属性 '${mutation.attributeName}' 被改变`);
        } else if (mutation.type === 'characterData') {
            console.log('文本内容被改变');
        }
    }
});

// 开始观察目标节点以进行所需的变更
observer.observe(targetNode, config);

// 假设你在这里对目标节点进行一些操作来测试观察器
// 示例操作：
// targetNode.appendChild(document.createElement('div')); // 添加一个新子元素
// targetNode.setAttribute('data-example', 'value'); // 修改属性值

// 若不再需要观察时，可以调用 disconnect() 方法停止观察
// observer.disconnect();

代码解释：

选择目标节点：通过 document.getElementById() 获取要监视的 DOM 节点。
配置对象：通过配置对象 config 指定希望观察哪些类型的变化。例如，可以选择监控子节点列表、属性变化和字符数据。
创建 MutationObserver 实例：使用回调函数处理检测到的变更。回调函数将接收一个 mutationsList 数组，其中包含所有发生的变更。
开始观察：通过调用 observe() 方法并传入目标节点和配置对象开始监听 DOM 的变化。
断开连接：当不再需要时，可以调用 disconnect() 方法停止对目标节点的监听。