MutationObserver

Posted 94pm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MutationObserver相关的知识,希望对你有一定的参考价值。

一、MutationObserver Config

childList:

添加、删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知)

attribute:
修改目标节点属性时会收到通知
characterData:
观察目标节点下所有文本类型节点(即子代或后代)的文字变化(注意:添加、删除文本节点不会被观察到,如果改变之前的类型不是文本节点也不会被观察到),该属性只能配合subtree使用。
subtree:
目标节点或后代节点变更时都会触发,必须配合其他属性一起使用
attributeOldValue:
如果属性为true或者省略,则相当于设置为true,表示需要记录改变前的目标属性值,设置了attributeOldValue可以省略attributes设置
characterDataOldValue:
如果characterData为true或省略,则相当于设置为true,表示需要记录改变之前的目标数据,设置了characterDataOldValue可以省略characterData设置 
attributeFilter:
attributes设置为true或者被忽略时可以自定义需要观察的属性名称数组
 
二、MutationRecord的属性

变动记录中的属性如下:

  1. type:如果是属性变化,返回"attributes",如果是一个CharacterData节点(Text节点、Comment节点)变化,返回"characterData",节点树变化返回"childList"
  2. target:返回影响改变的节点
  3. addedNodes:返回添加的节点列表
  4. removedNodes:返回删除的节点列表
  5. previousSibling:返回分别添加或删除的节点的上一个兄弟节点,否则返回null
  6. nextSibling:返回分别添加或删除的节点的下一个兄弟节点,否则返回null
  7. attributeName:返回已更改属性的本地名称,否则返回null
  8. attributeNamespace:返回已更改属性的名称空间,否则返回null
  9. oldValue:返回值取决于type。对于"attributes",它是更改之前的属性的值。对于"characterData",它是改变之前节点的数据。对于"childList",它是null

其中 typetarget这两个属性不管是哪种观察方式都会有返回值,其他属性返回值与观察方式有关,比如只有当attributeOldValue或者characterDataOldValue为true时oldValue才有返回值,只有改变属性时,attributeName才有返回值等。

 
三、MutationObserver选项与MutationEvent名称之间的对应关系

 

MutationEventMutationObserver options
DOMNodeInserted childList: true, subtree: true
DOMNodeRemoved childList: true, subtree: true
DOMSubtreeModified childList: true, subtree: true
DOMAttrModified attributes: true, subtree: true
DOMCharacterDataModified characterData: true, subtree: true

以上是关于MutationObserver的主要内容,如果未能解决你的问题,请参考以下文章