MutationObserver 使用场景

MutationObserver 使用场景示例

1. 监测子节点的添加和删除

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('子节点已添加或删除');
    }
  });
});
observer.observe(targetNode, { childList: true });

2. 监测属性的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes') {
      console.log(`属性 ${mutation.attributeName} 已改变`);
    }
  });
});
observer.observe(targetNode, { attributes: true });

3. 监测文本内容的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('文本内容已改变');
    }
  });
});
observer.observe(targetNode, { childList: true, subtree: true });

4. 监测样式的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      console.log('样式已改变');
    }
  });
});
observer.observe(targetNode, { attributes: true });

5. 监测节点的移动

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('节点已移动');
    }
  });
});
observer.observe(targetNode, { childList: true, subtree: true });

6. 监测整个 DOM 树的变化

const observer = new MutationObserver((mutations) => {
  console.log('DOM 树发生变化');
});
observer.observe(document.body, { childList: true, subtree: true });

7. 监测表单元素的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'INPUT') {
      console.log('输入框的值已改变');
    }
  });
});
observer.observe(formElement, { attributes: true });

8. 监测动态加载的内容

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('动态内容已加载');
    }
  });
});
observer.observe(targetNode, { childList: true });

9. 监测类名的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      console.log('类名已改变');
    }
  });
});
observer.observe(targetNode, { attributes: true });

10. 监测多个节点的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    console.log('多个节点发生变化');
  });
});
observer.observe(document.body, { childList: true, subtree: true });

11. 监测元素的可见性变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.style.display) {
      console.log('元素的可见性已改变');
    }
  });
});
observer.observe(targetNode, { attributes: true });

12. 监测数据表格的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('数据表格已更新');
    }
  });
});
observer.observe(tableElement, { childList: true, subtree: true });

13. 监测动态生成的列表项

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('列表项已添加或删除');
    }
  });
});
observer.observe(listElement, { childList: true });

14. 监测图像的加载状态

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'IMG') {
      console.log('图像加载状态已改变');
    }
  });
});
observer.observe(imageElement, { attributes: true });

15. 监测按钮状态的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'BUTTON') {
      console.log('按钮状态已改变');
    }
  });
});
observer.observe(buttonElement, { attributes: true });

16. 监测 CSS 类的动态切换

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      console.log('CSS 类已动态切换');
    }
  });
});
observer.observe(targetNode, { attributes: true });

17. 监测 SVG 元素的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'svg') {
      console.log('SVG 元素已改变');
    }
  });
});
observer.observe(svgElement, { attributes: true });

18. 监测动态内容的加载和卸载

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('动态内容已加载或卸载');
    }
  });
});
observer.observe(targetNode, { childList: true, subtree: true });

19. 监测表单字段的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'INPUT') {
      console.log('表单字段已改变');
    }
  });
});
observer.observe(formFieldElement, { attributes: true });

20. 监测多媒体元素的变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'attributes' && mutation.target.tagName === 'VIDEO') {
      console.log('视频元素的状态已改变');
    }
  });
});
observer.observe(videoElement, { attributes: true });