JS应用：MutationObserver

零合一

于 2024-07-05 17:36:59 发布

阅读量173

点赞数 6

分类专栏：前端应用实践文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43988567/article/details/140214821

版权

前端应用实践专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用途

用于监视DOM的变化，如节点的添加、删除，属性的修改，文本内容变化；
常规的事件如click，mousover、change、input，是需要用户主动触发，而一些dom本身的变化的监控可以借助MutationObservr；

特点

它等待所有脚本任务完成后，才会运行（即异步触发方式）。
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动。

使用

创建一个观察者实例：首先，你需要创建一个 MutationObserver 实例，并传递一个回调函数作为参数。这个回调函数会在 DOM 发生变化时被调用。
.配置观察选项：在创建 MutationObserver 实例时，你还需要定义一个配置对象，用于指定你想观察的 DOM 变化类型。
开始观察：使用 observe 方法来指定你想要观察的 DOM 节点和之前定义的配置选项。
停止观察（可选）：如果你不再需要观察 DOM 变化，可以使用 disconnect 方法来停止观察。

案例:

<!DOCTYPE html>
<html>
  <header>
    <meta charset="UTF-8"> 
    <title>test</title>
    <style>
      .newclass{
        color: red;
      }
    </style>
  </header>
  <body>
    <div id="app" class="app">
      <button id="changeNode">changeNode</button>
      <button id="changeAttr">chageAttr</button>
      <button id="changeCharacter">changeCharacter</button>
      
      <div id="div">aaaaaa</div>
    </div>
    <script type="text/javascript">
      let myObserver = new MutationObserver(function(changes,observer){
        console.log(changes,observer)
      })
      myObserver.observe(document.body,{
        childList: true,                        // 观察子节点变化（新增、删除、更改）
        attributes: true,                      // 观察属性变化
        characterData: true,                   // 观察节点内容或节点文本变化
        subtree: true,                         // 是否作用于该节点的所有后代节点
        // attributeFilter: ['class', 'src'],   // 表示要观察的特定属性
        attributeOldValue: true,               // 观察attributes变化时，是否记录变化前的属性值
        characterDataOldValue: true,           // 观察characterData变化时，是否记录变化前的值
      })
      let div = document.querySelector('#div')
      let changeNode = document.querySelector('#changeNode')
      let changeAttr = document.querySelector('#changeAttr')
      let changeCharacter = document.querySelector('#changeCharacter')
    
      changeNode.onclick = function(){
         // 测试节点变化
        div.appendChild(div.cloneNode(true))
      }
      changeAttr.onclick = function(){
         // 测试属性变化
        div.setAttribute('class', 'newclass')
      }
      changeCharacter.onclick = function(){
        //测试character变化 ，其只对文本节点生效
        div.firstChild.nodeValue = 'bbbb'
      }
    </script>
  </body>
</html>