MutationObserve捕捉是哪个div删除了元素
时间: 2024-02-11 08:06:36 浏览: 20
使用 `MutationObserver` 监听 DOM 的变化时,可以通过观察目标节点的子节点列表和属性变化来捕获元素的添加、删除或修改等操作。如果你想捕捉哪个 div 删除了元素,可以在监听回调函数中检查 `MutationRecord` 对象的 `removedNodes` 属性,该属性返回一个 NodeList,包含被删除的节点列表。通过判断被删除节点的父节点是否是目标 div,即可确定哪个 div 删除了元素。
以下是一个示例代码:
```javascript
// 目标 div 的选择器
const targetSelector = '.target-div';
// 创建 MutationObserver 实例
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 判断是否有节点被删除
if (mutation.removedNodes.length) {
// 遍历被删除节点列表
mutation.removedNodes.forEach((node) => {
// 如果被删除节点的父节点是目标 div,则输出日志
if (node.parentElement.matches(targetSelector)) {
console.log(`元素被删除了:${node.outerHTML}`);
console.log(`被删除元素的父节点是:${node.parentElement.outerHTML}`);
}
});
}
});
});
// 配置 MutationObserver
const config = {
childList: true, // 监听子节点列表的变化
attributes: false, // 不监听属性变化
subtree: true, // 监听目标节点及其子孙节点的变化
};
// 监听目标节点
const targetNode = document.querySelector(targetSelector);
observer.observe(targetNode, config);
```
在上面的代码中,我们先定义了一个目标 div 的选择器,然后创建了一个 `MutationObserver` 实例,并在回调函数中判断被删除节点的父节点是否是目标 div,如果是,则输出日志。最后,我们将 `MutationObserver` 实例绑定到目标节点上并启动监听。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)