childList:
添加、删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知)
attribute: 修改目标节点属性时会收到通知 characterData: 观察目标节点下所有文本类型节点(即子代或后代)的文字变化(注意:添加、删除文本节点不会被观察到,如果改变之前的类型不是文本节点也不会被观察到),该属性只能配合subtree使用。 subtree: 目标节点或后代节点变更时都会触发,必须配合其他属性一起使用 attributeOldValue: 如果属性为true或者省略,则相当于设置为true,表示需要记录改变前的目标属性值,设置了attributeOldValue可以省略attributes设置 characterDataOldValue: 如果characterData为true或省略,则相当于设置为true,表示需要记录改变之前的目标数据,设置了characterDataOldValue可以省略characterData设置 attributeFilter: attributes设置为true或者被忽略时可以自定义需要观察的属性名称数组 二、MutationRecord的属性变动记录中的属性如下:
- type:如果是属性变化,返回"attributes",如果是一个CharacterData节点(Text节点、Comment节点)变化,返回"characterData",节点树变化返回"childList"
- target:返回影响改变的节点
- addedNodes:返回添加的节点列表
- removedNodes:返回删除的节点列表
- previousSibling:返回分别添加或删除的节点的上一个兄弟节点,否则返回null
- nextSibling:返回分别添加或删除的节点的下一个兄弟节点,否则返回null
- attributeName:返回已更改属性的本地名称,否则返回null
- attributeNamespace:返回已更改属性的名称空间,否则返回null
- oldValue:返回值取决于type。对于"attributes",它是更改之前的属性的值。对于"characterData",它是改变之前节点的数据。对于"childList",它是null
其中 type、target这两个属性不管是哪种观察方式都会有返回值,其他属性返回值与观察方式有关,比如只有当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 } |