用于观察

• 整个文档
• DOM树的一部分

• 某个元素

  • 元素属性
  • 子节点
  • 文本

    用法

    let observer = new MutationObserver((mutationRecords, mutationObserver) => console.log('DOM was mutated!', mutationRecords, mutationObserver));
    observer.observe(document.body, {attributes: true});

• observe() 方法

  • 使用 observe() 把 MutationObserver 实例与DOM 关联
  • 参数
    • 要观察的 DOM 节点
    • MutationObserverInit对象
      • 用于控制观察哪些方面的变化
• 回调（微任务）与 MutationRecord
  • MutationObserver 的回调函数
    • 参数
      • MutationRecord 实例数组

     - MutationObserver 的实例

• disconnect() 方法
  • 被观察元素不会被垃圾回收
  • 使用 disconnect() 后
    • 停止此后变化事件回调
    • 抛弃已经加入任务队列要异步执行的回调
      • 使用 setTimeout() 可以让回调执行完再 disconnect()
• 复用 MutationObserver
  • 多次调用 observe() 方法
  • MutationRecord.target 标识发生变化事件的目标节点
  • disconnect()会停止观察所有目标
• 重用MutationObserver
  • disconnect() 不会消毁 MutationObserver
  • 对其再次使用 observe() 关联新的目标节点可以重新启用 (reattach)

    MutationObserverInit 观察范围

    MutationObserverInit 对象

    

    observe() 调用时， MutationObserverInit 对象中的 attribute、characterData 和 childList 属性至少有一个为 true，否则抛出错误。

异步回调与记录队列

记录队列

• 回调微任务异步执行

• 多变化事件

  • 回调接收一个以进入记录队列为顺序的MutationRecord 实例数组

    takeRecords()

    取出并返回所有 MutationRecord 这实例，并清空记录队列

    性能

• DOM3 替代 DOM2 的 MutationEvent 而设计

• 将变化回调委托给微任务执行
• 不是没有代价
  • MutationObserver 的引用 非对称
    • MutationObserver 对目标节点为弱引用
    • 目标节点对 MutationObserver 是强引用
  • MutationRecord 的引用
    • 从 MutationRecord 抽出最有用信息，然后保存对一个新对象，抛弃MutationRecord