使用MutationObserver监听页面DOM结构发生变化

遇到这样的需求，在页面发生变化时检查部分标签是否还存在（例如：video、audio、input等等），从而做相关的的业务处理。 我们可以使用MutationObserver来实现该需求。

MutationObserver接口提供了监视对DOM树所做更改的能力。替代了旧的MutationEvent。

在observe中，可以设置以下观察🔎类型：

• childList: 观察子节点的增删变化
• attributes: 观察属性的变化
• subtree: 观察所有下属节点的变动，须同时指定childList、attributes和characterData中的一种或多种使用
• characterData: 观察节点内容或节点文本的变动
• attributeOldValue: Boolean，如果为true，表示需要记录变动前的属性值，在回调MutationRecord对象中返回
• characterDataOldValue: Boolean，如果为true，表示需要记录变动前的数据值，在回调MutationRecord对象中返回
• attributesFilter: Array，表示需要观察的特定属性（如['class', 'src', ...]）

使用例子🌰

const targetNode = document.getElementById("id"); // targetNode为需要观察的目标变动节点，如果是整个页面则为document.body
const options = {
  childList: true,
  attributes: true,
  subtree: true
  ...
};

const observer = new MutationObserver((records) => {
  // records包含了与变动相关的所有信息
  // do something in callback function
});

observer.observe(targetNode, options);