MutationObserver 原理的理解

[sakila1012]

写在前面

遇到过MutationObserver，但没有真正了解过怎么用和原理，今天花时间整理下。

MutationObserver 可以在DOM被修改时，异步执行回调「不兼容IE6~10」

• 等到当前所有DOM操作都结束后才触发（异步触发方式），而事件绑定是触发后立即执行的
• 把 DOM 变动记录封装成一个数组进行处理，而不是一条条地个别处理 DOM 变动

• 既可以观察发生在DOM节点的所有变动，也可以观察某一类变动

  mob.observe([target], [options]) 监听DOM的改变

  • childList：子元素的变动
  • attribute：属性的变动
  • attributeOldValue：记录变动前的属性值
  • attributeFilter：需要观察特定的属性，例如['class', 'index',...]
  • characterData：节点内容或节点文本的变动
  • characterDataOldValue：记录变动前的数据值
  • subtree：后代节点变动

  mob.disconnect() 停止 DOM 监听 mob.takeRecord() 清除变动记录，即不在处理“未处理变动”

  MutationRecord 对象

  • type：观察变动的类型（attribute，characterData，或childList）
  • target： 发生变动的 DOM 对象
  • addNodes：新增的 DOM 对象
  • removeNodes：删除的 DOM 对象
  • previousSibling：前一个同级的 DOM 对象，如果没有则返回 null
  • nextSibling：下一个同级的 DOM 对象，如果没有返回 null
  • attributeName：发生变动的属性，如果设置了attributeFilter，则只返回预先指定属性
  • oldValue：变动前的值，这个属性只对 attribute 和 characterData 变动有效，如果发生 childList 变动，则返回 null。