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

JS_监听dom变化触发，new MutationObserver

news 2025/8/5 5:40:28

MutationObserver 是一个用于监测 DOM 变化的接口，它提供了一种机制来异步观察在特定元素或文档中发生的 DOM 变化。
MutationObserver 的作用包括：

1.监测 DOM 变化：你可以创建一个 MutationObserver 实例，并指定一个回调函数。当指定的元素或文档中的 DOM 发生变化时，回调函数会被触发。

2.捕获变化类型：MutationObserver 可以捕获多种类型的 DOM 变化，包括添加或删除节点、属性变化、文本内容变化等等。通过配置 MutationObserver 的监听选项，你可以选择监测的变化类型。

3.异步处理变化：MutationObserver 使用异步机制来处理 DOM 变化，这意味着当变化发生时，不会立即触发回调函数，而是在当前 JavaScript 执行完成后才会执行回调函数。这有助于避免在变化发生时立即执行处理逻辑，从而提高性能和避免不必要的重复操作。

4.跨元素监测：你可以选择监测单个元素的变化，也可以监测整个文档或文档片段的变化。通过设置 MutationObserver 的目标节点，你可以指定要监测变化的范围。

通过使用 MutationObserver，你可以在 DOM 发生变化时执行自定义的操作，例如更新页面、触发其他事件或执行特定的逻辑。它在实现一些动态的、基于 DOM 变化的功能时非常有用，比如实时监测聊天消息、自动保存表单数据、实时更新数据等。

childList: 布尔值，表示是否监测子节点的添加或移除操作。
subtree: 布尔值，表示是否递归监测子节点的变化。如果设置为 true，则会监测目标节点及其所有后代节点的变化。
attributes: 布尔值，表示是否监测属性的变化。
attributeOldValue: 布尔值，表示是否在记录属性变化时存储旧值。
attributeFilter: 数组，用于指定要监测的属性名称。只有在指定的属性发生变化时，才会触发回调函数。如果未指定，则监测所有属性的变化。
characterData: 布尔值，表示是否监测文本节点的内容变化。
characterDataOldValue: 布尔值，表示是否在记录文本节点内容变化时存储旧值。

function onObserve(targetSelector, resolve) {// 目标元素的选择器 targetSelector// 创建 MutationObserver 实例const observer = new MutationObserver((mutationsList) => {const targetElement = document.querySelector(targetSelector);if (targetElement) {resolve && resolve()}});// 配置 MutationObserver 监听选项const config = {childList: true,subtree: true};// 监听整个文档的变化// document.documentElement文档对象的根节点，也就是 <html> 元素   可替换为需要监控的节点observer.observe(document.documentElement, config);
}onObserve('.aaaa .bbbb #ccc', ()=>{console.log('出现元素.aaaa .bbbb #ccc');
})