要在 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)`,我们开始观察目标节点的变化。
可以根据需要调整和扩展此示例,以满足具体需求。