JavaScript 的 MutationObserver API基础解释
2025-04-03 16:58:06 163 分享链接 开发笔记 javascript
const observer = new MutationObserver((mutationsList) => { ... });
这行代码使用了 JavaScript 的 MutationObserver
API,它的主要作用是监听 DOM(文档对象模型)的变化。下面为你详细解释这行代码以及 MutationObserver
的工作原理。
MutationObserver
简介
MutationObserver
是一个内置于现代浏览器中的 JavaScript API,用于异步监听 DOM 树的变化。当 DOM 元素的属性、子节点、文本内容等发生改变时,MutationObserver
会捕获这些变化并执行相应的回调函数。
代码逐行解释
1. 创建 MutationObserver
实例
const observer = new MutationObserver((mutationsList) => {
// 这里是回调函数的内容
});
new MutationObserver()
是一个构造函数,用于创建一个新的MutationObserver
实例。(mutationsList) => { ... }
是一个箭头函数,作为MutationObserver
的回调函数。当 DOM 发生变化时,这个回调函数会被调用。mutationsList
是回调函数的参数,它是一个包含所有发生变化的MutationRecord
对象的数组。每个MutationRecord
对象都描述了一个具体的 DOM 变化。
2. 回调函数的内容
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// 处理子节点的添加或删除
} else if (mutation.type === 'attributes') {
// 处理属性的变化
}
}
});
for (const mutation of mutationsList)
:遍历mutationsList
数组,对每个MutationRecord
对象进行处理。mutation.type
:表示 DOM 变化的类型,常见的类型有'childList'
(子节点的添加或删除)、'attributes'
(属性的变化)和'characterData'
(文本内容的变化)。
3. 开始监听
observer.observe(targetNode, options);
observer.observe()
方法用于开始监听指定的 DOM 节点。targetNode
是要监听的 DOM 节点,可以是document
、document.body
或其他具体的元素。options
是一个配置对象,用于指定要监听的变化类型。例如:
const options = {
childList: true, // 监听子节点的添加或删除
attributes: true, // 监听属性的变化
subtree: true // 监听目标节点及其所有后代节点的变化
};
完整示例
// 创建 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('子节点发生了变化');
const addedNodes = Array.from(mutation.addedNodes);
const removedNodes = Array.from(mutation.removedNodes);
console.log('新增的节点:', addedNodes);
console.log('移除的节点:', removedNodes);
}
}
});
// 要监听的目标节点
const targetNode = document.body;
// 配置监听选项
const options = {
childList: true,
subtree: true
};
// 开始监听
observer.observe(targetNode, options);
在你的代码中的作用
在你的代码中,MutationObserver
用于监听 document.body
及其子节点的变化,当有新的符合 div img[data-testid="in_painting_picture"]
选择器的图片元素添加到页面时,会为这些图片添加选择按钮,并提供批量下载的功能。
const observer = new MutationObserver((mutationsList) => {
console.log('MutationObserver 回调函数被调用');
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
const addedNodes = Array.from(mutation.addedNodes);
const images = findImagesInNodes(addedNodes);
images.forEach((image) => {
// 为图片添加选择按钮
});
if (images.length > 0) {
// 创建批量下载按钮
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
希望这些解释能帮助你理解 MutationObserver
的工作原理和在代码中的应用。如果你还有其他问题,请随时提问。
最近更新
- 2025-07-04 18:20
- 详细列出 drawtext 滤镜在 ffmpeg7.1.1 支持的参数列表
- 2025-07-04 16:33
- windows cmd 中调用 FFmpeg 命令的注意事项
- 2025-07-04 16:18
- Windows 命令行解析复杂参数时的典型错误问题
- 2025-07-03 22:50
- 详细介绍 FFmpeg7.1.1 subtitles 滤镜 force_style 支持的参数
- 2025-07-03 05:11
- 借助 FFmpeg 的 filter_complex 滤镜混合音频流的实例。
- 2025-07-03 02:26
- 借助 FFmpeg 的 drawtext 滤镜给视频添加标题。
- 2025-07-02 18:19
- 使用ffmpeg处理srt字幕的对齐和位置相关参数说明
- 2025-07-01 23:20
- 可以批量剪辑视频的软件有哪些呢?这五款超好用!
- 2025-05-10 17:40
- 零基础也能秒懂的场景设计课,从「叙事场景 / 氛围场景」分类到「分镜表模板」。
- 2025-05-10 17:32
- 分镜景别干货!全身/半身/特写/近景/中景/远景/全景/大特写