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名称之间的对应关系

 

MutationEvent MutationObserver 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 }
上一篇:JavaScript--EventLoop + Promise + Async/Await


下一篇:浏览器和Node 中的Event Loop