在 JavaScript 中监听 DOM 节点的变化

要在 JavaScript 中监听 DOM 节点的变化，您可以使用 `MutationObserver` API。`MutationObserver` 提供了一种监视对 DOM 树所做更改的能力，并在每次更改发生时触发回调函数。

以下是一个示例，演示如何使用 `MutationObserver` 监听特定 DOM 节点的变化：

// 目标节点
const targetNode = document.getElementById('myElement');

// 创建一个 MutationObserver 实例
const observer = new MutationObserver((mutationsList, observer) => {
  // 在每次 DOM 变化时触发的回调函数
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      // 子节点列表变化（添加或删除子节点）
      console.log('子节点发生变化');
    } else if (mutation.type === 'attributes') {
      // 属性变化
      console.log('属性发生变化');
    }
  }
});

// 配置 MutationObserver
const config = { childList: true, attributes: true, subtree: true };

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

 

在上述示例中，我们首先选择要监视的目标节点，并创建了一个 `MutationObserver` 实例。然后，我们定义了一个回调函数，该函数在每次 DOM 变化时被调用。在回调函数中，我们可以根据变化的类型执行相应的操作。

最后，我们配置了 `MutationObserver` 的选项（`config`），指定要观察的变化类型（子节点变化和属性变化），以及是否要观察目标节点的子节点（`subtree: true`）。

通过调用 `observer.observe(targetNode, config)`，我们开始观察目标节点的变化。

可以根据需要调整和扩展此示例，以满足具体需求。