48.MutationObserver

之前说任务队列里有说道"MutationObserver",MutationObserver是一个异步的任务,x MutationObserver用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动都会触发MutationObserver事件。

构造MutationRecord

MutationRecord是一个构造函数,通过new来产生实例,接收一个回调函数，回调函数有两个参数，一个变动数组，第二个是观察者实例。

    // 创建MutationObserver实例，返回一个观察者对象
    const mutation = new MutationObserver(function (mutationsList, observer) {
      console.log(mutationsList)
      console.log(observer)
    })

我们可以在回到的数组mutationsList里面拿到变化的对象

MutationRecord实例的方法

observe

对观察者添加需要观察的元素，并设置需要观察元素的哪些方面

mutation.observe(container, options);

其中options包括

属性	类型	描述
childList	Boolean	是否观察子节点的变动
attributes	Boolean	是否观察属性的变动
characterData	Boolean	是否节点内容或节点文本的变动
subtree	Boolean	是否观察所有后代节点的变动
attributeOldValue	Boolean	观察 attributes 变动时，是否记录变动前的属性值
characterDataOldValue	Boolean	观察 characterData 变动时，是否记录变动前的属性值
attributeFilter	Array	表示需要观察的特定属性（比如['class','src']），不在此数组中的属性变化时将被忽略

disconnect

disconnect方法用来停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。

takeRecords

用来清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。Mutation Observer 处理的就是一个个MutationRecord实例所组成的数组。
MutationRecord对象包含了DOM的相关信息，有如下属性:

属性	类型	描述
type	String	根据变动类型，值为 attributes， characterData 或 childList
target	Node	发生变动的DOM节点
addedNodes	NodeList	被添加的节点，或者为 null
removedNodes	NodeList	被删除的节点，或者为 null
previousSibling	Node	被添加或被删除的节点的前一个兄弟节点，或者为 null
nextSibling	Node	被添加或被删除的节点的后一个兄弟节点，或者为 null
attributeName	String	发生变更的属性的本地名称，或者为 null
attributeNamespace	String	发生变更的属性的命名空间，或者为 null
oldValue	String	如果 type 为 attributes，则返回该属性变化之前的属性值；如果 type 为 characterData，则返回该节点变化之前的文本数据；如果 type为 childList，则返回 null

我们可以通过这些属性去执行你的代码