参考文档
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)
})();