当前位置：首页 > article >正文

MutationObserver小试牛刀

article 2024/9/24 15:24:54

参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

简介

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。
MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。

demo

先监听body
如果出现包含类名 relation-list 的元素，那么取消对body的监控
同时开启对该元素的监控
对该元素监控时，每次更新只关注该元素本身的更新，且只执行一次回调

;(function(){
  const config = { attributes: false, childList: true, subtree: true }
  const observeLi = new MutationObserver((mutations)=>{
    let onece = false
    mutations.forEach((mutation)=>{
      if(!onece && mutation.target.classList.contains('relation-list')){
        console.log('pxoxq11111: ', mutation)
        onece = true
      }
    })
  })
  const observe = new MutationObserver((mutations)=>{
    let flag = true
    mutations.forEach((mutation)=>{
      if(mutation.target.classList.contains('relation-list') && flag){
        console.log('pxoxq: ', mutation)
        observe.disconnect()
        flag = false
        observeLi.observe(mutation.target, config)
      }
    })
  })
  observe.observe(document.body, config)
})();