MutationObserver的示例代码的使用(附示例代码)

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

MutationObserver的使用

首先先介绍一下MutationObserver的特点
1.MutationObserver的回调属于微队列
2.它会在触发指定 DOM 事件时调用指定的回调函数说白了就是用来检测DOM节点的

MutationObserver回调函数

参数

callback

一个回调函数每当被指定的节点以及配置项有 DOM 变动时会被调用。
回调函数拥有两个参数一个是描述所有被触发改动的数组另一个是调用该函数的 Observer 对象

返回值

一个新的、包含监听 DOM 变化回调函数的 MutationObserver 对象。

实例方法

observe()

参数

target需要观测的目标节点
options: 观测节点的配置项点击这里查看完整的配置信息

返回值

undefined

说明开始观测DOM节点当DOM节点发生改变时可以调用回调函数callback

disconnect()

参数

返回值

undefined

说明告诉观测者停止观测DOM节点

takeRecords()

参数

返回值

返回一个MutationRecord 对象列表每个对象都描述了应用于 DOM 树某部分的一次改动

说明此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录以便在停止观察者时可以处理任何未处理的更改。

示例代码

<!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>MutationObserver的示例</title>
</head>

<body>
    <!-- 被检测的DOM节点 -->
    <div id="container">
        <div class="child"></div>
    </div>
    <!-- 点击改变DOM节点 -->
    <button id="update">改变DOM节点</button><br><br>
    <!-- 停止观测 -->
    <button id="stop"> 停止观测</button>

    <script>
        //获取DOM节点
        const container = document.getElementById('container')
        const button = document.getElementById('update')
        const stopbutton = document.querySelector('#stop')

        //配置检测哪些变化可以被observe检测到
        const options = {
            attributes: true,//检测相关节点的属性的变化
            childList: true,//检测目标节点的删除与新增
        }

        // 创建MutationObserver实例返回一个观察者对象
        const mutation = new MutationObserver(function (mutationRecoards, observer) {
            //打印描述所有被触发改动的 MutationRecord 对象数组
            console.log(mutationRecoards)
            //打印该函数的 MutationObserver 对象
            console.log(observer)
        })

        // 对观察者添加需要观察的元素并设置需要观察元素的哪些方面
        mutation.observe(container, options);

        // 对container进行操作
        button.addEventListener('click', function () {
            container.innerText = '这是文本';  // 内容改变
            container.style.background = 'green'; // 属性改变
            for (let i = 0; i < 3; i++) {  // 子节点
                container.appendChild(document.createElement('div'))
            }
        })

        //停止观测
        stopbutton.onclick = function () {
            mutation.disconnect()
        }
    </script>
</body>

</html>