javascript基础学习系列五百二十四：MutationObserver 接口

不久前添加到DOM 规范中的MutationObserver 接口，可以在DOM被修改时异步执行回调。使
用MutationObserver 可以观察整个文档、DOM树的一部分，或某个元素。此外还可以观察元素属性、子节点、文本，或者前三者任意组合的变化。
基本用法
MutationObserver 的实例要通过调用MutationObserver 构造函数并传入一个回调函数来创建：
let observer = new MutationObserver(() => console.log(‘DOM was mutated!’));

1. observe()方法
   新创建的MutationObserver 实例不会关联DOM的任何部分。要把这个observer 与DOM 关
   联起来，需要使用observe()方法。这个方法接收两个必需的参数：要观察其变化的DOM 节点，以及
   一个MutationObserverInit 对象。
   MutationObserverInit 对象用于控制观察哪些方面的变化，是一个键/值对形式配置选项的字典。
   例如，下面的代码会创建一个观察者（observer）并配置它观察元素上的属性变化：
   let observer = new MutationObserver(() => console.log(‘ attributes changed’));
   observer.observe(document.body, { attributes: true });
   执行以上代码后，元素上任何属性发生变化都会被这个MutationObserver 实例发现，然
   后就会异步执行注册的回调函数。元素后代的修改或其他非属性修改都不会触发回调进入任务
   队列。可以通过以下代码来验证：
   let observer = new MutationObserver(() => console.log(‘ attributes changed’));
   observer.observe(document.body, { attributes: true });
   document.body.className = ‘foo’;
   console.log(‘Changed body class’);
   // Changed body class
   // attributes changed
   注意，回调中的console.log()是后执行的。这表明回调并非与实际的DOM 变化同步执行。
   回调与MutationRecord
   每个回调都会收到一个MutationRecord 实例的数组。MutationRecord 实例包含的信息包括发
   生了什么变化，以及DOM的哪一部分受到了影响。因为回调执行之前可能同时发生多个满足观察条件
   的事件，所以每次执行回调都会传入一个包含按顺序入队的MutationRecord 实例的数组。
   下面展示了反映一个属性变化的MutationRecord 实例的数组：
   let observer = new MutationObserver(
   (mutationRecords) => console.log(mutationRecords));
   observer.observe(document.body, { attributes: true });
   document.body.setAttribute(‘foo’, ‘bar’);
   // [
   // {
   // addedNodes: NodeList [],
   // attributeName: “foo”,
   // attributeNamespace: null,
   // nextSibling: null,
   // oldValue: null,
   // previousSibling: null
   // removedNodes: NodeList [],
   // target: body
   // type: “attributes”
   // }
   // ]
   下面是一次涉及命名空间的类似变化：
   let observer = new MutationObserver(
   (mutationRecords) => console.log(mutationRecords));
   observer.observe(document.body, { attributes: true });
   document.body.setAttributeNS(‘baz’, ‘foo’, ‘bar’);
   // [
   // {
   // addedNodes: NodeList [],
   // attributeName: “foo”,
   // attributeNamespace: “baz”,
   // nextSibling: null,
   // oldValue: null,
   // previousSibling: null
   // removedNodes: NodeList [],
   // target: body
   // type: “attributes”
   // }
   // ]
   连续修改会生成多个MutationRecord 实例，下次回调执行时就会收到包含所有这些实例的数组，
   顺序为变化事件发生的顺序：
   let observer = new MutationObserver(
   (mutationRecords) => console.log(mutationRecords));
   observer.observe(document.body, { attributes: true });
   document.body.className = ‘foo’;
   document.body.className = ‘bar’;
   document.body.className = ‘baz’;
   // [MutationRecord, MutationRecord, MutationRecord]
   下表列出了MutationRecord 实例的属性。
   属 性 说 明
   target 被修改影响的目标节点
   type 字符串，表示变化的类型：“attributes”、“characterData"或"childList”
   oldValue 如果在MutationObserverInit 对象中启用（attributeOldValue 或characterData OldValue
   为true），"attributes"或"characterData"的变化事件会设置这个属性为被替代的值
   "childList"类型的变化始终将这个属性设置为null
   属 性 说 明
   attributeName 对于"attributes"类型的变化，这里保存被修改属性的名字
   其他变化事件会将这个属性设置为null
   attributeNamespace 对于使用了命名空间的"attributes"类型的变化，这里保存被修改属性的名字
   其他变化事件会将这个属性设置为null
   addedNodes 对于"childList"类型的变化，返回包含变化中添加节点的NodeList
   默认为空NodeList
   removedNodes 对于"childList"类型的变化，返回包含变化中删除节点的NodeList
   默认为空NodeList
   previousSibling 对于"childList"类型的变化，返回变化节点的前一个同胞Node
   默认为null
   nextSibling 对于"childList"类型的变化，返回变化节点的后一个同胞Node
   默认为null
   传给回调函数的第二个参数是观察变化的MutationObserver 的实例，演示如下：
   let observer = new MutationObserver(
   (mutationRecords, mutationObserver) => console.log(mutationRecords,
   mutationObserver));
   observer.observe(document.body, { attributes: true });
   document.body.className = ‘foo’;
   // [MutationRecord], MutationObserver