JavaScript 的 MutationObserver API基础解释
2025-04-03 16:58:06 80 分享链接 开发笔记 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-04-06 15:46
- chrome.runtime.connect 和 chrome.runtime.onConnect 的区别
- 2025-04-06 15:44
- chrome.tabs.sendMessag chrome.runtime.sendMessage他们的区别是啥
- 2025-04-06 15:41
- Chrome 扩展 API 不同组件之间进行消息通信的监听与发送
- 2025-04-06 05:31
- 在 Chrome 扩展的 manifest.json 里,action 字段的结构在 Manifest V3 中不能使用script
- 2025-04-05 11:41
- 记录main.py调用另一个python文件的直接引用函数方法
- 2025-04-05 11:11
- 详细介绍 Python 的标准 GUI库 tkinter 中常见的组件
- 2025-04-05 01:44
- 在 tkinter 里,grid 布局与 pack布局 place布局的区别
- 2025-04-05 00:35
- 在 tkinter 里,grid 布局管理器采用 Frame 布局的原因
- 2025-04-05 00:07
- 在 tkinter 里,sticky 是 grid 布局管理器中的一个重要参数
- 2025-04-03 16:57
- JavaScript 的 MutationObserver API基础解释