mutationObserver是一个在浏览器环境中一种用于监听DOM变化的JavaScript API，它可以用于监听 DOM 树中指定节点及其子节点的变化，当节点内容、属性、子节点结构等发生改变时，它可以及时检测到并触发回调函数。这对于前端开发来说非常有用，可以被用来监控 DOM 变化、异步数据加载和自定义组件等场景。

基本用法

复制 1
 2const observer = new MutationObserver((mutations) => {
 3  mutations.forEach((mutation) => {
 4    console.log(mutation.type); 
 5  });
 6});
 7
 8
 9const config = {
10  attributes: true, 
11  childList: true, 
12
13  subtree: true 
14};
15
16
17const targetNode = document.getElementById("target");
18
19
20observer.observe(targetNode, config);

上面的代码创建了一个MutationObserver实例，并将其绑定到一个目标节点上。当目标节点或其子孙节点发生变化时，MutationObserver实例会调用传入的回调函数，其中参数mutations是一个MutationRecord数组，包含了所有变化记录的信息。

监听类型

MutationObserver的config参数可以用来指定监听的类型，它有以下几个属性：

• attributes：监听属性变化；
• childList：监听子节点的添加、删除；
• characterData：监听文本内容的变化；
• subtree：监听目标节点的所有后代节点的变化。

我们可以将多个类型组合起来，例如：

复制 1const config = {
 2  attributes: true, 
 3  childList: true, 
 4  subtree: true 
 5};

上面的配置表示监听目标节点及其子孙节点的所有变化。

断开监听

我们可以通过disconnect方法来断开MutationObserver实例的监听：

复制 1observer.disconnect();

应用场景

mutationObserver的应用场景非常广泛，以下是一些常见的例子：

• 自动保存表单：监听表单内容的变化，自动保存表单内容，避免用户手动点击保存按钮；
• 自动加载数据：监听列表滚动条位置的变化，自动加载更多数据；
• 观察者模式：监听一个对象的变化，当变化发生时触发相应的回调函数。
• 自动获取页面高度：监听页面添加元素成员,自动计算高度（微页面组装元素列表）

总之，mutationObserver可以帮助我们在DOM变化时及时更新页面，并提升用户体验。

注意事项

• 在监听节点变化时，需要注意避免无限循环，例如在回调函数中修改了被监听的节点，会导致 MutationObserver 不断触发。
• 在监听异步数据加载和自定义组件等场景时，需要注意是否有对应的节点或属性需要监听。
• 在兼容性方面，MutationObserver 在 IE9 及以下版本不支持。