JS MutationObserver

MutationObserver

原生API中用来监听node节点变化的一个类 常见的使用方法如下

<div id="div1">111111111</div>
<button onclick="handleClick()">OK</button>

const div1 = document.querySelector('#div1')
const observe = new MutationObserver((mutations) => {
  console.log('hhhh', mutations)
}).observe(div1, {attributes: true})
function handleClick() {
  div1.setAttribute('style', 'color: red')
  div1.setAttribute('data-name', 'abc')
}
// 只会打印一次hhh  

MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback 返回了一个集合 集合中有两个MutationRecord对象

MutationObserver对象有三个方法，分别如下：

• 1. observe：设置观察目标，接受两个参数，target：观察目标，options：通过对象成员来设置观察选项
• 2. disconnect：停止MutationObserver对象的观察，且清空所有的MutationRecord对象
• 3. takeRecords：清空记录队列并返回里面的内容

关于observe方法中options参数（MutationObserverInit字典）有已下几个选项：

属性名	属性类型	默认值	属性描述
attributeFilter	Array	null	需要监听的属性的列表，为空就是监听全部
attributeOldValue	Boolean	false	是否记录改变前的旧值
attributes	Boolean	false	是否监听元素属性变化
characterData	Boolean	false	是否监听characterData内容的变化，主要涉及Text, ProcessingInstruction, and Comment相关的接口。
characterDataOldValue	Boolean	false	是否记录characterData内容的旧值
childList	Boolean	false	是否监听节点的子节点的添加删除操作
subtree	Boolean	false	是否监听子树相关变化