JavaScript/ DOM : MutationObserver，用于检测DOM树中任意位置的“lang`”属性的更改

基础概念

MutationObserver 是 JavaScript 中的一个接口，用于监视 DOM（文档对象模型）树中的更改。它可以检测到 DOM 树中的节点添加、删除、属性更改等变化。MutationObserver 提供了一种异步观察 DOM 变化的机制，不会阻塞页面的其他操作。

类型

MutationObserver 可以监视以下几种类型的 DOM 变化：

子节点变化：包括子节点的添加和删除。
属性变化：包括属性的添加、删除和修改。
字符数据变化：包括文本内容的变化。
目标节点变化：包括目标节点的替换。

应用场景

数据绑定：在框架中实现双向数据绑定，当 DOM 元素的属性发生变化时，自动更新数据模型。
实时监控：监控 DOM 的变化，进行实时统计或分析。
动态内容更新：在内容动态更新时，执行特定的逻辑操作。

示例代码

以下是一个使用 MutationObserver 监视 DOM 中 lang 属性变化的示例：

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver((mutationsList, observer) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'lang') {
            console.log('The lang attribute was modified:', mutation.target);
        }
    }
});

// 选择要观察变动的节点
const targetNode = document.querySelector('#myElement');

// 配置观察选项
const config = { attributes: true, attributeFilter: ['lang'] };

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

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

参考链接

MDN Web Docs: MutationObserver

常见问题及解决方法

观察器未触发：
- 确保目标节点存在并且已经加载到 DOM 中。
- 确保观察器的配置正确，特别是 attributes 和 attributeFilter 选项。

观察器触发过于频繁：
- 可以通过设置 MutationObserver 的 subtree 选项为 false，只观察目标节点本身的变化，而不观察其子节点的变化。
- 可以通过设置 MutationObserver 的 attributeFilter 选项，只观察特定的属性变化。
浏览器兼容性问题：
- 确保使用的浏览器支持 MutationObserver 接口。可以通过 Can I use 检查浏览器的兼容性。