DOM监控 MutationObserver | 木瓜太香

DOM监控 MutationObserver

大家好！我是木瓜太香，一个传播webstorm使用技巧的前端工程师，这一次给大家带来的是 DOM 监控的方法。

MutationObserver接口提供了监视DOM树更改的能力，是旧的 Mutation 的替代品

使用方式：通过 MutationObserver构造函数创建对象 ob，该对象下有以下可用方法

• observe(dom对象,option) ：配置MutationObserver在DOM更改匹配给定选项时，通过其回调函数开始接受通知
• disconnect()：取消监控
• takeRecords()：从MutationObserver的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord对象的新Array中

一个简单的示例

html部分

<div class="container">
    <h1 class="title">一个标题</h1>
    <button class="btn">点击按钮取消监控</button>
</div>

javascript部分

,    let container = document.querySelector('.container');
    let btn = document.querySelector('.btn')

    btn.onclick = function (){
        console.log('监控已经取消');
        observer.disconnect();
    }

    function callback (){
        console.log("回调函数参数");
        console.log(arguments);
    }
    
    let observer = new MutationObserver(callback);

    observer.observe(container,{
        attributes: true // 指定元素属性改变的时候触发回调
    })

详解 observe disconnect takeRecords

• observe 方法主要指定要监控哪些 DOM 的变化作为第一个参数传入，和要监控哪些地方，使用一个对象描述并作为第二个参数传入

  • 参数一: 要观察的 DOM 或者要观察的所有子节点的公共根节点

    • 参数二：一个可选的 MutationObserverInit对象，此对象的配置项描述了 DOM 的哪些变化要被监控，注意：childList，attributes 或者 characterData 三个属性之中，至少有一个必须为 true，否则会抛出 TypeError 异常，实际有attributeFilter也行

  • MutationObserverInit 对象属性

    属性	描述
    attributeFilter	要监视的特定属性名称的数组。如果未包含此属性，则对所有属性的更改都会触发变动通知。无默认值。
    attributeOldValue	当监视节点的属性改动时，将此属性设为 true 将记录任何有改动的属性的上一个值。有关观察属性更改和值记录的详细信息，详见Monitoring attribute values in MutationObserver。无默认值。
    attributes	设为 true 以观察受监视元素的属性值变更。默认值为 false。
    characterData	设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化。无默认值。在监控该类值的时候，传入observe的第一个参数应该是 textNode 而非 element ，不然就需要配合 subtree 使用
    characterDataOldValue	设为 true 以在文本在受监视节点上发生更改时记录节点文本的先前值。详情及例子，请查看 Monitoring text content changes in MutationObserver。无默认值。
    childList	设为 true 以监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点。默认值为 false。
    subtree	设为 true 以将监视范围扩展至目标节点整个节点树中的所有节点。MutationObserverInit 的其他值也会作用于此子树下的所有节点，而不仅仅只作用于目标节点。默认值为 false。

  • 重复的 observe 调用后面会覆盖前面，前提是第一个参数是相同的，实质上只覆盖了要监控的类型也就是第二个参数

• disconnect 方法移除监控，如果某个元素从 dom 树中移除那么 MutationObserve 将同样被删除

• takeRecords 方法返回已检测到但尚未由观察者的回调函数处理的所有匹配DOM更改的列表，使变更队列保持为空。 此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。该方法通常是程序级别的监控，例如设置监控之后立马修改然后调用该方法就可以获取到信息

      let observer = new MutationObserver(callback);
      
      // console.log(container.childNodes);
  
  
      observer.observe(container.childNodes[0], {
          // attributes: true,
          characterData: true,
          characterDataOldValue: true,
          // childList: true,
          // subtree: true
          // attributeFilter: ["class","data-username"],
          // attributeOldValue: true
      })
  
      container.childNodes[0].textContent = "哈哈哈123"
      console.log(observer.takeRecords());
  

监控到变化之后获取信息：

只监控变化没有用，重要的是我们要知道哪里变了，通常我们可以拿到变化前的老值，新值可以通过具体dom对象获取，关于信息回调函数参数中的 MutationRecord 对象很重要

**特别注意：**所有被监控到的更改，其记录的 target 信息都是具体被更改的那个节点对象，如果被更改的是 文本 那么 target 就是一个文本节点。