关于MutationObserver用于监听元素DOM结构变化

Agwenbi

已于 2023-07-05 16:57:03 修改

阅读量527

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

于 2023-04-21 16:14:26 首次发布

本文链接：https://blog.csdn.net/Ag_wenbi/article/details/130291412

版权

JavaScript 专栏收录该内容

47 篇文章 3 订阅

订阅专栏

该文章介绍了如何利用MutationObserverAPI来观察并响应DOM元素及其子孙节点的变化，包括子节点的添加或删除。通过创建和配置MutationObserver实例，可以实现对DOM结构的实时监控，并在发生变化时执行回调函数。

摘要由CSDN通过智能技术生成

/**
 * @description: 发布订阅处理DOM结构变化
 * @param {*} el DOM元素
 * @return {*}
 */
export const observerDom = (el) => {
  if (!el) { // undefined的情况
    return
  }
  const observerFunc = (mutationList, observer) => {
    console.log(mutationList, observer)
  }
  const mutationObserver = new MutationObserver(observerFunc)
  mutationObserver.observe(el, {
    childList: true, // 观察目标子节点的变化，是否有添加或者删除
    attributes: false, // 观察属性变动
    subtree: true // 观察后代节点
  })
  return mutationObserver
}

const observer = observerDom('DOM');
observer.disconnect(); // 取消监听