js如何使用MutationObserver
时间: 2024-09-09 10:14:17 浏览: 47
on-load:使用MutationObserver的DOM元素的loadunload事件
在JavaScript中,MutationObserver是一种API,用于检测DOM(文档对象模型)的变化。它可以帮助我们在元素结构、属性或内容发生改变时执行相应的回调函数。以下是使用MutationObserver的基本步骤:
1. **创建观察者**: 首先,你需要创建一个`MutationObserver`实例,传递一个`callback`函数作为第一个参数,这个函数会在检测到变化时被调用。
```javascript
const observer = new MutationObserver(mutationsList => {
// 这里是处理DOM变化的回调函数
});
```
2. **配置观察选项**: 第二个参数是一个`options`对象,可以包含以下几个可选属性:
- `attributes`: 如果设置为`true`,会监控元素的属性变化。
- `childList`: 如果设置为`true`,会监控节点增删和子节点变动。
- `characterData`: 如果设置为`true`,会监控文本节点的数据变化。
```javascript
const config = { attributes: true, childList: true, subtree: true };
```
3. **开始观察**: 将目标DOM元素和配置传给`observe()`方法开始观察。
```javascript
observer.observe(targetNode, config);
```
4. **停止观察**: 当不再需要观察时,可以调用`observer.disconnect()`来关闭观察。
5. **回调处理**: 回调函数`mutationsList`参数是一个`MutationRecord[]`数组,包含了所有检测到的变更信息。
示例:
```javascript
let targetNode = document.getElementById('myElement');
observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log('Mutation detected:', mutation.type);
// 根据mutation记录的具体类型做相应处理
});
});
config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);
```
阅读全文