MutationObserver Api

1.作用

创建并返回一个新的 MutationObserver 它会在指定的 DOM 发生变化时被调用。

2.构造函数

var mutationObserver = new MutationObserver(callback);

参数：

• callback：每当被指定的节点或子树以及配置项有 DOM 变动时会被调用。回调函数拥有两个参数：

  • 一个是描述所有被触发改动的 MutationRecord 对象数组，

  • 另一个是调用该函数的 MutationObserver 对象。

创建并使用observer

var targetNode = document.querySelector("domDiv");

var observer = new MutationObserver(callback);

observer.observe(targetNode,  {
    childList: true, // 观察目标子节点的变化，是否有添加或者删除
    attributes: true, // 观察属性变动
    subtree: true, // 观察后代节点，默认为 false
};);

3.实例方法

observe()

语法

mutationObserver.observe(target[, options])

参数

target：DOM 树中的一个要观察变化的 DOM Node (可能是一个 Element)，或者是被观察的子节点树的根节点。

options：此对象的配置项描述了 DOM 的哪些变化应该报告给 MutationObserver 的 callback。当调用 observe() 时，childList、attributes 和 characterData 中，必须有一个参数为 true。否则会抛出 TypeError 异常。options 的属性如下：

• subtree 可选：
  • 当为 true 时，将会监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target。默认值为 false。
• childList 可选
  • 当为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）。默认值为 false。
• attributes 可选：
  • 当为 true 时观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue，默认值则为 false。
• attributeFilter 可选：
  • 一个用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知。
• attributeOldValue 可选
  • 当为 true 时，记录上一次被监听的节点的属性变化；可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 false。
• characterData 可选
  • 当为 true 时，监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue，默认值则为 false
• characterDataOldValue 可选
  • 当为 true 时，记录前一个被监听的节点中发生的文本变化。默认值为 false

takeRecords()

作用

返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空。此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。

语法

mutationRecords = mutationObserver.takeRecords()

返回值

返回一个MutationRecord 对象列表，每个对象都描述了应用于 DOM 树某部分的一次改动。

disconnect()

作用

告诉观察者停止观察变动。可以通过调用其 observe() 方法来重用观察者。

语法

mutationObserver.disconnect()