语法
作用
- 用于集成：第三方脚本集成
- 用于架构：跟踪代码其他部分引入的更改
  - 动态高亮显示示例
停止观察

一、MutationObserver 是一个内建对象，它观察 DOM 元素，并在检测到更改时触发回调。
二、MutationObserver 允许对 DOM 子树（特性atribute, 文本内容，添加/删除元素）中的任何更改作出反应。

语法

一、创建一个带有回调函数的观察器

let observer = new MutationObserver(callback);

二、将其附加到一个DOM节点

observer.observe(node, config);

1、config是一个具有布尔选项的对象，该布尔选项表示“将对哪些更改做出反应”，用于优化，避免不必要的回调调用以节省资源。
（1）childList：node的直接自己子节点的更改
（2）subtree：node 的所有后代的更改
（3）attributes： node 的特性（attribute）
（4）attributeFilter：特性名称数组，只观察选定的特性
（5）characterData：是否观察 node.data（文本内容）
（6）attributeOldValue：如果为 true，则将特性的旧值和新值都传递给回调（参见下文），否则只传新值（需要 attributes 选项），
（7）characterDataOldValue：如果为 true，则将 node.data 的旧值和新值都传递给回调（参见下文），否则只传新值（需要 characterData 选项）。
三、在发生任何更改后，将执行“回调”：更改被作为一个 MutationRecord 对象列表传入第一个参数，而观察器自身作为第二个参数。
1、MutationRecord 对象具有以下属性：
（1）type—— 变动类型，以下类型之一：
① “attributes”：特性被修改了，
② “characterData”：数据被修改了，用于文本节点，
③ “childList”：添加/删除了子元素。
（2）target —— 更改发生在何处：”attributes” 所在的元素，或 “characterData” 所在的文本节点，或 “childList” 变动所在的元素，
（3）addedNodes/removedNodes —— 添加/删除的节点，
（4）previousSibling/nextSibling —— 添加/删除的节点的上一个/下一个兄弟节点，
（5）attributeName/attributeNamespace —— 被更改的特性的名称/命名空间（用于 XML），
（6）oldValue —— 之前的值，仅适用于特性或文本更改，如果设置了相应选项 attributeOldValue/characterDataOldValue。
【示例1】有一个

，它具有 contentEditable 特性。该特性使我们可以聚焦和编辑元素。

<div contentEditable id="elem">Click and <b>edit</b>, please</div>

<script>
let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords); // console.log(the changes)
});

// 观察除了特性之外的所有变动
observer.observe(elem, {
  childList: true, // 观察直接子节点
  subtree: true, // 及其更低的后代节点
  characterDataOldValue: true // 将旧的数据传递给回调
});
</script>

1、如果我们在浏览器中运行上面这段代码，并聚焦到给定的

上，然后更改 edit 中的文本，console.log 将显示一个变动：

mutationRecords = [{
  type: "characterData",
  oldValue: "edit",
  target: <text node>,
  // 其他属性为空
}];

2、如果我们进行更复杂的编辑操作，例如删除 edit，那么变动事件可能会包含多个变动记录：

mutationRecords = [{
  type: "childList",
  target: <div#elem>,
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  // 其他属性为空
}, {
  type: "characterData"
  target: <text node>
  // ...变动的详细信息取决于浏览器如何处理此类删除
  // 它可能是将两个相邻的文本节点 "edit " 和 ", please" 合并成一个节点，
  // 或者可能将它们留在单独的文本节点中
}];

作用

用于集成：第三方脚本集成

一、使用 MutationObserver，我们可以监测到我们不需要的元素何时出现在我们的 DOM 中，并将其删除。
【示例1】你需要添加一个第三方脚本，该脚本不仅包含有用的功能，还会执行一些我们不想要的操作，例如显示广告

Unwanted ads

。
当然，第三方脚本没有提供删除它的机制。
这时可以用MutationObserver。
二、例如第三方脚本会将某些内容添加到我们的文档中，并且我们希望检测出这种情况何时发生，以调整页面，动态调整某些内容的大小等。

用于架构：跟踪代码其他部分引入的更改

一、从架构的角度来看，在某些情况下，MutationObserver 有不错的作用。
二、假设我们正在建立一个有关编程的网站。自然地，文章和其他材料中可能包含源代码段。
1、在HTML标记（markup)中的此类片段如下：

...
<pre class="language-javascript"><code>
  // 这里是代码
  let hello = "world";
</code></pre>
...

2、高亮库
（1）为了提高可读性，同时对其进行美化，我们将在我们的网站上使用 JavaScript 语法高亮显示库，例如 Prism.js。
（2）为了使用 Prism 对以上代码片段进行语法高亮显示，我们调用了 Prism.highlightElem(pre)，它会检查此类 pre 元素的内容，并为这些元素添加特殊的标签（tag）和样式，以进行彩色语法高亮显示。
3、我们应该在什么时候执行该高亮显示方法呢？
（1）我们可以在 DOMContentLoaded 事件中执行，或者将脚本放在页面的底部。
（2）DOM 就绪后，我们可以搜索元素 pre[class*=”language”] 并对其调用 Prism.highlightElem：

// 高亮显示页面上的所有代码段
document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);

3、假设我们要从服务器动态获取资料。
目前，只需要关心我们从网络服务器获取 HTML 文章并按需显示：

let article = /* 从服务器获取新内容 */
articleElem.innerHTML = article;

（1）新的 article HTML 可能包含代码段。我们需要对其调用 Prism.highlightElem，否则它们将不会被高亮显示。
4、对于动态加载的文章，应该在何处何时调用 Prism.highlightElem？
（1）我们可以将该调用附加到加载文章的代码中，如下所示：

let article = /* 从服务器获取新内容 */
articleElem.innerHTML = article;

let snippets = articleElem.querySelectorAll('pre[class*="language-"]');
snippets.forEach(Prism.highlightElem);

（2）但是如果代码中有很多地方都是在加载内容：文章，测验和论坛帖子等。
①方案1：我们是否需要在每个地方都附加一个高亮显示调用，以在内容加载完成后，高亮内容中的代码。
a. 缺点

那很不方便。
并且，如果内容是由第三方模块加载的，该怎么办？例如，我们有一个由其他人编写的论坛，该论坛可以动态加载内容，并且我们想为其添加语法高亮显示。没有人喜欢修补第三方脚本。

② 方案2：我们可以使用 MutationObserver 来自动检测何时在页面中插入了代码段，并高亮显示它们。
a. 优点：

我们在一个地方处理高亮显示功能，从而使我们无需集成它。

动态高亮显示示例
一、如果运行这段代码，它将开始观察下面的元素，并高亮显示现在此处的所有代码片段
1、【示例1】
（1）观察元素 ```javascript let observer = new MutationObserver(mutations => {

for(let mutation of mutations) { // 检查新节点，有什么需要高亮显示的吗？

for(let node of mutation.addedNodes) {
```
// 我们只跟踪元素，跳过其他节点（例如文本节点）
if (!(node instanceof HTMLElement)) continue;

// 检查插入的元素是否为代码段
if (node.matches('pre[class*="language-"]')) {
  Prism.highlightElement(node);
}

// 或者可能在子树的某个地方有一个代码段？
for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
  Prism.highlightElement(elem);
}
```
} }

});

let demoElem = document.getElementById(‘highlight-demo’);

observer.observe(demoElem, {childList: true, subtree: true});

（2）示例元素
```html
<p id="highlight-demo" style="border: 1px solid #ddd">一个具有 <code>id="highlight-demo"</code> 的示例元素，运行上面那段代码来观察它。</p>

（3）填充innerHTML，这导致MutationObserver作出反应，并突出显示其内容：

let demoElem = document.getElementById('highlight-demo');

// 动态插入带有代码段的内容
demoElem.innerHTML = `下面是一个代码段：
  <pre class="language-javascript"><code> let hello = "world!"; </code></pre>
  <div>另一个代码段：</div>
  <div>
    <pre class="language-css"><code>.class { margin: 5px; } </code></pre>
  </div>
`;

2、先运行观察元素，再运行示例元素，将看到MutationObserver是如何检测并高亮显示代码段的。
3、有了MutationObserver，可以在HTML中添加/删除代码段，而无需考虑高亮问题。

停止观察

一、有一个方法可以停止观察节点：
1、observer.disconnect()：停止观察。
二、当我们停止观察时，观察器可能尚未处理某些更改。在这种情况下，我们使用
1、observer.takeRecords()：获取尚未处理的变动记录列表，表中记录的是已经发生，但回调暂未处理的变动。
【示例1】

// 如果你关心可能未处理的近期的变动
// 那么，应该在 disconnect 前调用获取未处理的变动列表
let mutationRecords = observer.takeRecords();

// 停止跟踪变动
observer.disconnect();
...

三、回调函数不会被observer.takeRecords()返回的记录调用。
四、观察器在内部对节点使用弱引用。
1、也就是说，如果一个节点被从DOM中移除了，并且该节点变得不可访问，那么它就可以被垃圾回收。
2、观察到DOM节点这一事实并不能阻止垃圾回收。

😈 JavaScript大魔王

DOM变动观察器（Mutation observer）

语法

作用

用于集成：第三方脚本集成

用于架构：跟踪代码其他部分引入的更改

动态高亮显示示例

停止观察