作为前端你还不懂 MutationObserver？那 Out 了

2023-04-26
北京
本文字数：1483 字
阅读完需：约 5 分钟

🥙前言

为什么突然写 MutationObserver 呢？最近在写页面水印的时候用到了 MutationObserver 方法，两者之间有什么联系呢？不用 MutationObserver 情况下，使用网站的人员可以随意修改 DOM 就可以把系统作者的版权标识（水印）去掉，然后使用无水印的网站，这显然是违背了系统作者的意愿，那么怎么防止这一操作呢？当然是 MutationObserver，它能够监听 DOM 的变化，根据 DOM 的变化然后做出相应操作，比如删除水印后，使用 MutationObserver 监听到了水印的 DOM 被删除，就会立即生成一个水印，这样就杜绝了上面的情况。

🥪一、MutationObserver

MutationObserver构造函数用来监听 DOM 的变化，比如节点增加、删除，属性的改变，文本的变动都能监听到。它具有以下特点：

等所有 dom 操作结束后才触发，可以看成异步
会把 dom 的变化记录放到数组中进行处理
可以监听所有类型的 dom 变化，也能指定类型监听

用 MutationObserver 创建一个 createObserve 实例，它会在指定的 DOM 发生变化时被调用。其中 MutationObserver 构造函数中有两个参数。

mutationRecoard：存放所有 dom 变化的数组
observe：观察者实例

const createObserve = new MutationObserver((mutationRecoard,observe)=>{
})

复制代码

1. MutationRecoard 监听记录详情

dom 每次变化都会记录在 MutationRecoard 中，所以它是一个数组类型，MutationRecoard 记录了每次 DOM 变化时的详细信息，具体如下所示：

具体如下图所示：

🌮二、MutationObserver 实例对象方法

1. observe(node,config)

配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知。有两个参数：

node：观察元素的所有节点
config：配置项，可以观测指定配置项的变化

配置项的详细属性如下：

2. disconnect()

阻止 MutationObserver 实例继续接收的通知，直到再次调用其 observe() 方法，该观察者对象包含的回调函数都不会再被调用。

3. takeRecords()

从 MutationObserver 的通知队列中删除所有待处理的记录，并将它们返回到 MutationRecord 对象的新 Array 中。

🍔三、案列

创建一个观察器并传入回调
为观察器配置观察节点
指定观察特定配置的 dom 变化
执行观察器回调
获取到 DOM 变化记录

  <div class="content">    <ui>      <li class="0">0000000</li>      <li class="1">1111111</li>      <li class="2">222222</li>      <li class="3">33333</li>      <li class="4">4444</li>      <li class="5">55555</li>      <li class="6">6666</li>      <li class="7">77777</li>      <li class="8">888888</li>      <li class="9">99999</li>    </ui>  </div>

复制代码

// 观察器的配置（需要观察什么变动）const config = { attributes: true, childList: true, subtree: true,characterData:true,characterDataOldValue:true,attributDataOldValue:true};
// 当观察到变动时执行的回调函数const callback = function(mutationRecoard, observer) {    // Use traditional 'for loops' for IE 11    for(let mutation of mutationRecoard) {        if (mutation.type === 'childList') {            console.log('A child node has been added or removed.');        }        else if (mutation.type === 'attributes') {            console.log('The ' + mutation.attributeName + ' attribute was modified.');        }    }};
// 创建一个观察器实例并传入回调函数const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点observer.observe(document.getElementsByClassName('content')[0], config);
// 之后，可停止观察observer.disconnect();

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/a29c19e960de9f17f8e430754】。文章转载请联系作者。

不叫猫先生

关注

还未添加个人签名 2022-10-18 加入

还未添加个人简介

发布

暂无评论

创作场景

作为前端你还不懂 MutationObserver？那 Out 了

🥙前言

🥪一、MutationObserver

1. MutationRecoard 监听记录详情

🌮二、MutationObserver 实例对象方法

1. observe(node,config)

2. disconnect()

3. takeRecords()

🍔三、案列

不叫猫先生

评论