MutationObserver,可以监听的所有方面,demo,详细解释
时间: 2024-09-09 12:14:25 浏览: 20
MutationObserver 是一种 JavaScript API,它允许开发者监听 DOM(Document Object Model,文档对象模型)的变化。这个API主要用于监控指定元素及其子树结构、属性或者样式的变化,并在变化发生时执行回调函数。它的主要作用是在不直接操作DOM的情况下实现异步的DOM更新处理。
你可以创建一个 MutationObserver 实例,并传入两个参数:一个观察者回调函数和一个选项对象,该对象通常包含 `attributes`、`childList`、`characterData` 这三个可选属性来指定关注哪些方面的变动:
```javascript
// 创建观察者
const observer = new MutationObserver(mutationsList => {
// mutationsList 就是一个数组,包含了所有发生的DOM变化
for(let mutation of mutationsList) {
console.log('Mutation type:', mutation.type);
console.log('Target element:', mutation.target);
// 可能需要对每个具体的改变进行处理
if(mutation.attributeName) {
console.log('Attribute changed:', mutation.attributeName);
} else if(mutation.addedNodes || mutation.removedNodes) {
console.log('Node(s) added or removed:', mutation.addedNodes, mutation.removedNodes);
}
}
});
// 观察的目标元素及想要监视的变化
const targetNode = document.getElementById('example');
const config = { attributes: true, childList: true, subtree: true }; // 监听所有属性和子节点
// 开始观察
observer.observe(targetNode, config);
// 当不需要观察时,停止并清除观察器
// observer.disconnect();
```