JS使用MutationObserver接口来监听DOM的更新
在JavaScript中，可以使用MutationObserver接口来监听DOM的更新。以下是一个使用MutationObserver的示例代码，它监听一个DOM节点的变化，并在变化发生时输出信息
// 选择目标节点
const targetNode = document.getElementById('some-id');
// 创建一个观察者对象
const observer = new MutationObserver(function(mutationsList, observer) {
// 使用mutationsList变化记录进行操作
for(let mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
console.log('DOM has been updated!');
}
}
});
// 观察者的配置（观察目标节点的子节点变化和属性变化）
const config = { attributes: true, childList: true, subtree: true };
// 传入目标节点和观察选项并开始观察
observer.observe(targetNode, config);
// 以后，你可以停止观察
// observer.disconnect();在这个例子中，当#some-id元素的子元素发生变化，或者该元素的属性发生变化时，MutationObserver会被触发，并在控制台输出"DOM has been updated!"。如果你需要停止监听，可以调用observer.disconnect()方法。
原文地址：https://blog.csdn.net/twins3520/article/details/142668345
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！