JavaScript 的 MutationObserver API基础解释

2025-04-03 16:58:06 10 分享链接 开发笔记 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 的工作原理和在代码中的应用。如果你还有其他问题，请随时提问。