请解释 Mutation Observer API 的作用和用法。如何使用 Mutation Observer API 监听 DOM 树的变化？

推荐答案

Mutation Observer API 用于监听 DOM 树的变化，例如节点的添加、删除、属性更改、文本内容修改等。它提供了一种异步、高效的方式来观察 DOM 的变化，避免了使用轮询等性能较差的方法。

使用 Mutation Observer 的基本步骤如下：

1. 创建 MutationObserver 实例：

   const observer = new MutationObserver(callback);

   其中 callback 是一个回调函数，当观察到 DOM 变化时会被调用。该回调函数接收一个 MutationRecord 数组作为参数，每个 MutationRecord 描述了一次 DOM 变化。

2. 配置观察器： 使用 observe() 方法来指定要观察的 DOM 节点和变化的类型：

   observer.observe(targetNode, options);

   • targetNode 是要观察的 DOM 节点。
   • options 是一个配置对象，用于指定要观察的变化类型。常见的配置项包括：
     • childList：观察目标节点的子节点变化（添加或删除）。
     • attributes：观察目标节点的属性变化。
     • characterData：观察目标节点的文本内容变化。
     • subtree：是否观察目标节点的所有后代节点。
     • attributeFilter：一个属性名数组，用于指定观察哪些属性的变化（仅在 attributes 为 true 时有效）。
     • attributeOldValue：是否记录属性变化前的旧值。
     • characterDataOldValue：是否记录文本内容变化前的旧值。

3. 定义回调函数： 回调函数接收一个 MutationRecord 数组，每个 MutationRecord 对象包含有关 DOM 更改的信息：

   function callback(mutationList, observer) {
       mutationList.forEach(mutation => {
         // 根据 mutation.type 判断变化类型并处理
       });
   }

   MutationRecord 对象的常见属性包括：

   • type：变化的类型，例如 "childList", "attributes", "characterData"。
   • target：发生变化的节点。
   • addedNodes：被添加的节点列表 (仅在 type 为 "childList" 时有效)。
   • removedNodes：被移除的节点列表 (仅在 type 为 "childList" 时有效)。
   • attributeName：被修改的属性名 (仅在 type 为 "attributes" 时有效)。
   • oldValue：变化前的旧值 (仅在 attributeOldValue 或 characterDataOldValue 被设置为 true 时有效)。

4. 断开观察器： 使用 disconnect() 方法来停止观察 DOM 变化：

    observer.disconnect();

本题详细解读

Mutation Observer API 是一个强大的 Web API，用于监听 DOM 的变化，它允许开发者在不进行轮询的情况下，异步地响应 DOM 树的修改。相较于早期的 Mutation Events，Mutation Observer 具有更好的性能和更灵活的配置，并且提供了更精确的变化信息。

为何需要 Mutation Observer？

在 Web 开发中，动态更新 DOM 是常见的需求。例如：

• 当用户在网页上添加或删除元素时，更新 UI。
• 监视第三方库对 DOM 的更改。
• 实现类似于 Vue 或 React 等框架的数据绑定机制。

传统的做法通常使用 setInterval 定时检查 DOM 是否发生变化，或者使用 Mutation Events 事件监听，但是这些方式都有一些缺陷：

• 轮询 (setInterval)： 效率低下，即使 DOM 没有变化，也会重复执行检查，消耗 CPU 资源，造成性能浪费。
• Mutation Events: 会同步触发事件，可能造成性能问题，并且在某些场景下无法获取到完整的变化信息。

Mutation Observer API 正是为解决这些问题而生的。它具有以下优点：

• 异步： 变化发生时不会立即触发回调函数，而是将其加入到一个微任务队列中，这意味着回调函数会在浏览器空闲的时候执行，不会阻塞渲染和用户交互，提高了性能。
• 性能： 相比于轮询，Mutation Observer 只在 DOM 实际发生变化时才会被触发，减少了不必要的计算。
• 灵活： Mutation Observer 可以精确地配置要监听的变化类型 (子节点，属性，文本内容，后代节点等)。
• 信息完整： 回调函数接收 MutationRecord 数组，提供了关于变化的详细信息，包括变化类型、目标节点、添加/删除的节点、旧值等。

如何使用 Mutation Observer API

以下是一个详细的代码示例，展示如何使用 Mutation Observer 监听 DOM 变化：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>Mutation Observer Example</title>
</head>
<body>
    <div id="target-node">
        <p>初始文本</p>
    </div>
    <button id="add-button">添加子节点</button>
    <button id="remove-button">删除子节点</button>
    <button id="change-attr-button">修改属性</button>
    <button id="change-text-button">修改文本</button>

    <ul id="log"></ul>

    <script>
        const targetNode = document.getElementById('target-node');
        const addButton = document.getElementById('add-button');
        const removeButton = document.getElementById('remove-button');
        const changeAttrButton = document.getElementById('change-attr-button');
        const changeTextButton = document.getElementById('change-text-button');
        const logList = document.getElementById('log');

        // 创建 MutationObserver 实例
        const observer = new MutationObserver(callback);

        // 配置观察器
        const config = {
            childList: true, // 观察子节点添加或删除
            attributes: true, // 观察属性修改
            attributeOldValue: true, // 记录属性修改前的值
            characterData: true, // 观察文本内容修改
            characterDataOldValue: true, // 记录文本修改前的值
            subtree: true //观察子节点
        };

        // 开始观察目标节点
        observer.observe(targetNode, config);


        function logChange(message){
            const li = document.createElement('li');
            li.textContent = message;
            logList.appendChild(li);
        }


        // 定义回调函数
        function callback(mutationList) {
            mutationList.forEach(mutation => {
              switch(mutation.type){
                  case 'childList':
                    if(mutation.addedNodes.length){
                      logChange(`子节点添加：${Array.from(mutation.addedNodes).map(node => node.textContent).join(', ')}`);
                    }
                     if(mutation.removedNodes.length){
                       logChange(`子节点删除：${Array.from(mutation.removedNodes).map(node => node.textContent).join(', ')}`);
                    }
                  break;
                case 'attributes':
                  logChange(`属性修改：${mutation.attributeName} 从 ${mutation.oldValue} 修改为 ${mutation.target.getAttribute(mutation.attributeName)}`);
                    break;
                case 'characterData':
                  logChange(`文本内容修改：从 ${mutation.oldValue} 修改为 ${mutation.target.textContent}`)
                break;
              }
            });
        }

        // 添加子节点按钮
        addButton.addEventListener('click', () => {
            const newElement = document.createElement('p');
            newElement.textContent = '新添加的子节点';
            targetNode.appendChild(newElement);
        });


        // 删除子节点按钮
        removeButton.addEventListener('click', ()=>{
          if(targetNode.children.length > 0){
            targetNode.removeChild(targetNode.lastChild);
          }
        })

        // 修改属性按钮
        changeAttrButton.addEventListener('click', () => {
            targetNode.setAttribute('data-test', '测试属性值');
        });

         // 修改文本按钮
        changeTextButton.addEventListener('click', () => {
            targetNode.firstChild.textContent = '修改后的文本';
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个 MutationObserver 实例，并配置它观察 targetNode 的子节点、属性和文本内容的变化。当按钮被点击时，相应的 DOM 变化会触发回调函数，并在控制台打印变化信息。

Mutation Observer 的使用场景

除了上述示例中的基本 DOM 修改监听，Mutation Observer 还有许多实际的应用场景：

• 框架开发： 实现数据驱动的 UI 更新机制（例如 Vue，React 等框架）。
• 富文本编辑器： 监听文本内容的改变，实现实时的语法检查或格式化。
• 第三方库集成： 监听第三方库对 DOM 的修改，以便在页面发生改变时进行必要的响应。
• 网页性能分析： 记录 DOM 变化，帮助开发者分析页面性能瓶颈。
• 广告拦截器： 监听广告 DOM 的插入，并进行拦截。

总而言之，Mutation Observer API 是 Web 开发中非常有用的工具，它为我们提供了高效、灵活的方式来监听 DOM 变化，并作出相应的处理。