MutationObserver是什么呢MutationObserver是什么呢？ Mutation Observer

MutationObserver是什么呢？

Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。

observe方法

MutationObserver使用observe方法进行监听指定的元素节点变化

observe方法接受两个参数：

第一个参数：需要鉴定的元素（监听对象）
第二个参数：配置信息（options）

属性	描述	类型
childList	子节点的变动（指新增，删除或者修改）	Boolean
attributes	属性的变动	Boolean
characterData	节点内容或节点文本的变动	Boolean
subtree	标识是否将该观察器应用于该节点的所有后代节点	Boolean
attributeOldValue	标识观察attributes变动时，是否需要记录变动前的属性值	Boolean
characterDataOldValue	表示观察characterData变动时，是否需要记录变动前的值	Boolean
attributeFiter	表示需要观察的特定属性	Array, 如['class', 'src']

<!-- 例子 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>study MutationObserver</title>
</head>
<body>
    <div id="testId">
        <div class="test1">23123</div>
        <div class="test2">
            123213
        </div>
    </div>
    <script>
        var elementToObserve = document.getElementById('testId');

        var observer = new MutationObserver((records, instance) => {
            console.log('执行了改变', records, instance);
        })

        observer.observe(elementToObserve, {
            attributes: true,
            childList: true,
            attributeOldValue: true,
            characterDataOldValue: true,
            characterData: true,
            subtree: true
        })
    </script>
</body>
</html>

disconnect方法

当不需要监听节点变化时，可以使用disconnect()方法取消监听

takeRecords方法

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

MutationRecord对象

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

MutationRecord对象包含了DOM的相关信息，有如下属性：

属性名称	说明
type	观察的变动类型（attribute、characterData或者childList）
target	发生变动的DOM节点
addedNodes	新增的DOM节点
removedNodes	删除的DOM节点
previousSibling	前一个同级节点，如果没有则返回null
nextSibling	下一个同级节点，如果没有则返回null
attributeName	发生变动的属性。如果设置了attributeFilter，则返回预先指定的属性
oldValue	变动前的值。这个属性支队attribute和characterData变动有效，如果发生childList变动，则返回null