JS DOM编程笔记 - MutationObserver是干什么的（二三）-CSDN博客

本文链接：https://blog.csdn.net/cmdfas/article/details/121218332

今天我们来学习如何使用 JavaScript的 MutationObserver API 来监听对 DOM 树所做的更改。

MutationObserver 简介

MutationObserver API 允许我们监视对 DOM 树所做的更改。当 DOM 节点发生变化时，我们可以调用回调函数对变化做出反应。

使用 MutationObserver API 的基本步骤是：

首先，定义DOM变化时将执行的回调函数：

function callback(mutations) {
   
  // 
}

其次，创建一个 MutationObserver 对象并将回调传给 MutationObserver() 构造函数：

let observer = new MutationObserver(callback);

然后，调用observe()方法开始观察DOM变化。

observer.observe(targetNode, observerOptions);

observe() 方法有两个参数。target是要监视更改的节点的根元素。 observerOptions 参数包含指定将哪些 DOM 更改报告给观察者的回调属性。

最后，通过调用 disconnect() 方法停止观察 DOM 变化：

observer.disconnect();

observerOptions 参数

observe() 方法的第二个参数让我们指定 MutationObserver 的参数：

let options = {
   
  childList: true,
  attributes: true,
  characterData: false,
  subtree: false,
  attributeFilter: ['attr1', 'attr2'],
  attributeOldValue: false,
  characterDataOldValue: false
};

我们不需要使用所有属性。但是，要使 MutationObserver 正常工作，至少需要将 childList、attributes 或 characterData 之一设置为 true，否则 observer() 方法将会报错。

观察子元素变化

老规矩，还是假设有一个普普通通的列表：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MutationObserver示例: 子元素</title>
</head>
<body>
  <ul id="language">
    <li>HTML</li>