JavaScript — MutationObserver接口

最新推荐文章于 2024-02-06 14:18:00 发布

haizou

最新推荐文章于 2024-02-06 14:18:00 发布

阅读量392

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/zouhai1/article/details/119698178

版权

js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

介绍

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
MutationObserver()，创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

使用

写一个简单的例子，监听页面上 input 的显示与隐藏

<body>
    <input id="input" />
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>
<script>
    const inputEle = document.getElementById('input');
    const hideEle = document.getElementById('hide');
    const showEle = document.getElementById('show');

    // 隐藏
    hideEle.onclick = function () {
        inputEle.style.display = 'none';
    };

    // 显示
    showEle.onclick = function () {
        inputEle.style.display = 'inline-block';
    };
<script>

现在已经实现了让 input 显示与隐藏的功能，接下来就是要监听这个 input 的 DOM 变化

// 选择需要观察变动的节点
const targetNode = inputEle;

// 观察器的配置（需要观察什么变动）
const config = {
    attributes: true,
    childList: true,
    subtree: true
};

// 当观察到变动时执行的回调函数
const callback = function (mutationsList) {
    console.log(mutationsList);
    // to do
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

在回调函数里，我们可以根据 input 的状态的变化，去做一些事情

haizou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript — MutationObserver接口

介绍MutationObserver 接口提供了监视对 DOM 树所做更改的能力。MutationObserver()，创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。使用写一个简单的例子，监听页面上 input 的显示与隐藏<body> <input id="input" /> <button id="hide">隐藏</button> <button id="show"&gt
复制链接

扫一扫