MutationObserver - 监听Dom变化

Soyo.F

已于 2024-04-24 14:03:49 修改

阅读量1.1k

点赞数 18

文章标签：前端 javascript vue html5 html

于 2024-04-24 14:00:44 首次发布

本文链接：https://blog.csdn.net/weixin_43408330/article/details/138157155

版权

MutationObserver

监听DOM变化（属性变动、目标子节点变化、观察后代节点等）

构造函数

`MutationObserver()`

创建并返回一个新的MutationObserver实例对象，会在指定DOM改变时调用

MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe()方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改

const mutationObserver = new MutationObserver()

实例方法

`disconnect()`

阻止MutationObserver实例继续接收通知，除再次调用observe()方法外，该对象包含的回调函数都将不会再次被调用

Tips：如果被观察的元素被从 DOM 中移除，然后被浏览器的垃圾回收机制释放，此 MutationObserver 将同样被删除

返回值： undefined

mutationObserver.disconnect()

`observe()`

配置 MutationObserver 在 DOM 更改匹配给定选项时，通过其回调函数开始接收通知

返回值： undefined

mutationObserver.observe(target[, options])

target

DOM树中的一个要观察变化的DOM Node(可能是一个 Element)，或者是被观察的子节点树的根节点

options

此对象的配置项描述了 DOM 的哪些变化应该报告给 MutationObserver 的 callback。当调用 observe() 时，childList、attributes 和 characterData 中，必须有一个参数为 true。否则会抛出 TypeError 异常

options属性如下
- subtree^可选
  
  当为 true 时，将会监听以 target 为根节点的整个子树。包括子树中所有节点的属性，而不仅仅是针对 target。默认值为 false
- childList^可选
  
  当为 true 时，监听 target 节点中发生的节点的新增与删除（同时，如果 subtree 为 true，会针对整个子树生效）。默认值为 false
- attributes^可选
  
  当为 true 时观察所有监听的节点属性值的变化。默认值为 true，当声明了 attributeFilter 或 attributeOldValue，默认值则为 false
- attributeFilter^可选
  
  用于声明哪些属性名会被监听的数组。如果不声明该属性，所有属性的变化都将触发通知
- attributeOldValue^可选
  
  当为 true 时，记录上一次被监听的节点的属性变化；可查阅监听属性值了解关于观察属性变化和属性值记录的详情。默认值为 false
- characterData^可选
  
  当为 true 时，监听声明的 target 节点上所有字符的变化。默认值为 true，如果声明了 characterDataOldValue，默认值则为 false
- characterDataOldValue^可选
  
  当为 true 时，记录前一个被监听的节点中发生的文本变化。默认值为 false

`tackRecords()`

从 MutationObserver 的通知队列中删除所有待处理的通知，并将它们返回到 MutationRecord 对象的新 Array 中（返回已检测到但尚未由观察者的回调函数处理的所有匹配 DOM 更改的列表，使变更队列保持为空）

此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改

Tips：调用 takeRecords() 后，已发生但未传递给回调的变更队列将保留为空

返回值：返回一个MutationRecord 对象列表，每个对象都描述了应用于 DOM 树某部分的一次改动

mutationRecords = mutationObserver.takeRecords()

示例

const moDom = document.querySelector('#moDom')
const mutationObserver = new MutationObserver((mutations) => {
    // 属性变动相关处理逻辑
})
mutationObserver.observe(moDom, {
  subtree: true, // 将观察器应用于该节点的所有后代节点
  attributes: true, // 属性的变动
  childList: true, // 子节点的变动（新增、删除或者更改）
  characterData: true, // 节点内容或节点文本的变动
})
mutationObserver.disconnect() // 关闭监听实例