MutationObserver 是一个强大的 API，用于监测 DOM 的变化。它可以监听节点的添加、删除、属性变化等操作，并在这些变化发生时执行指定的回调函数。以下是 MutationObserver 的基本用法和示例。
1. 创建 MutationObserver
首先，创建一个 MutationObserver 实例，并传入一个回调函数，该函数将在监听的变化发生时被调用。
const observer = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('子节点发生变化。');
} else if (mutation.type === 'attributes') {
console.log(`属性 '${mutation.attributeName}' 发生变化。`);
}
}
});
2. 配置观察选项
在创建 MutationObserver 后，需要指定要观察的目标节点和选项。观察选项包括：
childList: 观察子节点的变化（添加或删除）。attributes: 观察属性的变化。subtree: 观察目标节点及其所有子节点。
3. 开始观察
使用 observe 方法来开始观察指定的节点。
const targetNode = document.getElementById('myElement');
const config = {
childList: true,
attributes: true,
subtree: true
};
observer.observe(targetNode, config);
4. 停止观察
如果需要停止观察，可以使用 disconnect 方法。
observer.disconnect();
5. 示例
以下是一个完整的示例，展示如何使用 MutationObserver 来监测 DOM 的变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MutationObserver Example</title>
</head>
<body>
<div id="myElement">
<p>初始内容</p>
</div>
<button id="addButton">添加子元素</button>
<button id="changeButton">修改属性</button>
<script>
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('子节点发生变化。');
} else if (mutation.type === 'attributes') {
console.log(`属性 '${mutation.attributeName}' 发生变化。`);
}
}
});
const targetNode = document.getElementById('myElement');
const config = {
childList: true,
attributes: true,
subtree: true
};
observer.observe(targetNode, config);
document.getElementById('addButton').addEventListener('click', () => {
const newElement = document.createElement('p');
newElement.textContent = '新添加的子元素';
targetNode.appendChild(newElement);
});
document.getElementById('changeButton').addEventListener('click', () => {
targetNode.setAttribute('data-changed', 'true');
});
</script>
</body>
</html>
总结
MutationObserver 提供了一种高效的方式来监测 DOM 变化，避免了使用 setInterval 等不必要的性能开销。它适用于需要动态更新内容或响应用户操作的场景。
前端工程师、程序员
标签:
html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~