MutationObserver：通过异步方式监测 DOM 变化

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 388 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #jquery #html #html5 #前端

javascript 专栏收录该内容

6 篇文章

订阅专栏

MutationObserver：通过异步方式监测 DOM 变化

什么是MutationObserver？

MutationObserver 是一个强大的 Web API，它允许开发者以异步方式监听 DOM 树的变化。与传统的 Mutation Events 不同，MutationObserver 提供了更高效、更灵活的 DOM 变化监测解决方案。

核心特性

异步执行：变化通知在微任务队列中处理，避免阻塞主线程
批量处理：多个变化会被批量处理，提高性能
精确监听：可以指定监听的具体变化类型（节点、属性、文本等）
内存友好：自动垃圾回收，避免内存泄漏

基本用法

创建Observer实例

// 创建MutationObserver实例
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        console.log('DOM发生了变化:', mutation.type);
    });
});

配置观察选项

const config = {
    childList: true,      // 监听子节点的添加和删除
    attributes: true,     // 监听属性变化
    attributeOldValue: true, // 记录属性旧值
    characterData: true,  // 监听文本内容变化
    subtree: true,        // 监听所有后代节点
    attributeFilter: ['class', 'style'] // 只监听特定属性
};

开始观察

// 获取目标元素
const targetNode = document.getElementById('target-element');

// 开始观察
observer.observe(targetNode, config);

监听不同类型的变化

1. 子节点变化

const childListObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            console.log('子节点发生变化');
            if (mutation.addedNodes.length > 0) {
                console.log('添加的节点:', mutation.addedNodes);
            }
            if (mutation.removedNodes.length > 0) {
                console.log('删除的节点:', mutation.removedNodes);
            }
        }
    });
});

childListObserver.observe(document.body, {
    childList: true,
    subtree: true
});

2. 属性变化

const attrObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'attributes') {
            console.log('属性发生变化:', mutation.attributeName);
            console.log('新值:', mutation.target.getAttribute(mutation.attributeName));
            console.log('旧值:', mutation.oldValue);
        }
    });
});

attrObserver.observe(document.getElementById('element'), {
    attributes: true,
    attributeOldValue: true,
    attributeFilter: ['class', 'data-status'] // 只监听class和data-status属性
});

3. 文本内容变化

const textObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'characterData') {
            console.log('文本内容发生变化:');
            console.log('新内容:', mutation.target.textContent);
            console.log('旧内容:', mutation.oldValue);
        }
    });
});

const textNode = document.querySelector('.editable-text');
textObserver.observe(textNode, {
    characterData: true,
    characterDataOldValue: true,
    subtree: true
});

实际应用场景

1. 动态内容加载监测

// 监听无限滚动内容的加载
const infiniteScrollObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.addedNodes.length > 0) {
            // 新内容加载完成，进行相应处理
            lazyLoadImages(mutation.addedNodes);
            trackAnalytics('content-added');
        }
    });
});

infiniteScrollObserver.observe(document.querySelector('.content-container'), {
    childList: true
});

2. 表单实时验证

// 监听表单输入变化
const formObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
            validateInput(mutation.target);
        }
    });
});

const inputs = document.querySelectorAll('input[type="text"]');
inputs.forEach(input => {
    formObserver.observe(input, {
        attributes: true,
        attributeFilter: ['value']
    });
});

3. 第三方广告监测

// 监测广告容器的变化
const adObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.addedNodes.length > 0) {
            const adElement = findAdElement(mutation.addedNodes);
            if (adElement) {
                trackAdImpression(adElement);
                setupAdClickListener(adElement);
            }
        }
    });
});

adObserver.observe(document.getElementById('ad-container'), {
    childList: true,
    subtree: true
});

性能优化建议

1. 精确配置观察选项

// 不好的做法：监听所有变化
observer.observe(document.body, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true
});

// 好的做法：只监听需要的特定变化
observer.observe(document.getElementById('specific-element'), {
    childList: true,
    attributes: {
        attributeFilter: ['data-important'] // 只监听特定属性
    }
});

2. 及时断开观察

// 当不再需要观察时，及时断开连接
function setupTemporaryObserver(element, callback) {
    const observer = new MutationObserver(callback);
    observer.observe(element, { childList: true });
    
    // 5秒后自动断开观察
    setTimeout(() => {
        observer.disconnect();
        console.log('Observer disconnected');
    }, 5000);
    
    return observer;
}

3. 批量处理变化

const debouncedObserver = new MutationObserver((mutations) => {
    // 使用防抖处理批量变化
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        processAllMutations(mutations);
    }, 100);
});

let debounceTimer;