JavaScript 是如何工作的：用 MutationObserver 追踪 DOM 的变化

JavaScript 是如何工作的：用 MutationObserver 追踪 DOM 的变化

如何使用 MutationObserver

将 MutationObserver 应用于你的应用相当简单。你需要通过传入一个函数来创建一个 MutationObserver 实例，每当有变化发生，这个函数将会被调用。函数的第一个参数是一个批次内所有的变化（mutation）的集合。每个变化都会提供它的类型和已经发生的变化的信息。

var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

这个被创建的对象有三个方法：

• observe — 开始监听变化。需要两个参数 - 你需要观察的 DOM 和一个设置对象

• disconnect — 停止监听变化

• takeRecords — 在回调函数调用之前，返回最后一个批次的变化。

下面这个代码片段展示了如何开始观察：

// 开始监听页面中根 HTML 元素中的变化。
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

现在，假设在 DOM 中你有一些非常简单的 div ：

<div id="sample-div" class="test"> Simple div </div>

使用 jQuery，你可以移除这个 div 的 class 属性：

$("#sample-div").removeAttr("class");

当我们开始观察，在调用 mutationObserver.observe(…) 之后我们将会在控制台看到每个 MutationRecord 的日志：

这个是由移除 class 属性导致的变化。

最后，为了在任务结束后停止对 DOM 的观察，你可以这样做：

// 停止 MutationObserver 对变化的监听。
mutationObserver.disconnect();

备择方案

不管怎么说，MutationObserver 并不是一直就有的。那么当 MutationObserver 出现之前，开发者用的是什么？

这是几个可用的其他选项：

• Polling

• MutationEvents

• CSS animations

Polling

最简单的最接近原生的方法是 polling。使用浏览器的 setInterval web 接口你可以设置一个在一段时间后检查是否有变化发生的的任务。自然，这个方法将会严重的降低应用或者网站的性能。

MutationEvents

在 2000 年，MutationEvents API 被引入。尽管很有用，但是每次 DOM 发生变化 mutation events 都会被触发，这将再次导致性能问题。现在 MutationEvents 接口已经被废弃，很快，现代浏览器将会完全停止对它的支持。

 

CSS animations

一个有点奇怪的备选方案依赖于 CSS animations。这可能听起来有些让人困惑。基本上，这个方案是创建一个动画，一旦一个元素被添加到了 DOM，这个动画就将会被触发。动画开始的时候，animationstart 事件会被触发：如果你对这个事件绑定了一个处理器，你将会确切的知道元素是什么时候被添加到 DOM 的。动画执行的时间段很短，所以实际应用的时候它对用户是不可见的。

首先，我们需要一个父级元素，我们在它的内部监听节点的插入：

<div id=”container-element”></div>

为了得到节点插入的处理器，我们需要设置一系列的 keyframe 动画，当节点插入的时候，动画将会开始。

@keyframes nodeInserted { 
 from { opacity: 0.99; }
 to { opacity: 1; } 
}

keyframes 已经创建，动画还需要被应用于你想要监听的元素。注意应设置很小的 duration 值 —— 它们将会减弱动画在浏览器上留下的痕迹：

#container-element * {
 animation-duration: 0.001s;
 animation-name: nodeInserted;
}

这为 container-element 的所有子节点都添加了动画。当动画结束后，插入的事件将会被触发。

我们需要一个作为事件监听者的 JavaScript 方法。在方法内部，必须确保初始的 event.animationName 检测是我们想要的那个动画。

var insertionListener = function(event) {
  // 确保这是我们想要的那个动画。
  if (event.animationName === "nodeInserted") {
    console.log("Node has been inserted: " + event.target);
  }
}

现在是时候为父级元素添加事件监听了：

document.addEventListener(“animationstart”, insertionListener, false); // standard + firefox
document.addEventListener(“MSAnimationStart”, insertionListener, false); // IE
document.addEventListener(“webkitAnimationStart”, insertionListener, false); // Chrome + Safari




MutationObserver 能提供上述提到的解决方案没有的很多优点。本质上，它能覆盖到每一个可能发生的 DOM 的变化，并且它会在一个批次的变化发生后被触发，这种方法使得它得到大大的优化。
最重要的，MutationObserver 被所有的主流现代浏览器所支持，还有一些使用引擎下 MutationEvents 的 polyfill。