MutationObserver

Posted 2022-04-19 94pm

一、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

其中 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