MutationObserver小试牛刀

本文主要是介绍MutationObserver小试牛刀，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考文档

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 = falsemutations.forEach((mutation)=>{if(!onece && mutation.target.classList.contains('relation-list')){console.log('pxoxq11111: ', mutation)onece = true}})})const observe = new MutationObserver((mutations)=>{let flag = truemutations.forEach((mutation)=>{if(mutation.target.classList.contains('relation-list') && flag){console.log('pxoxq: ', mutation)observe.disconnect()flag = falseobserveLi.observe(mutation.target, config)}})})observe.observe(document.body, config)
})();

这篇关于MutationObserver小试牛刀的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---