关于javascript: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 就是一个文本节点。

我本人建了一个web前端的交换裙有趣味的能够退出进来交换哦：237871108。
集体微信： GD6570 集体球球：718879459 当然你也能够哔哩哔哩搜寻木瓜太香