js 如何监听 body 内容是否改变
如果您想监听body内容的变化,并作出响应,可以使用MutationObserver
。以下是一个简单的例子,它会在body内容变化时在控制台输出一条消息:
// 创建一个观察者对象
const observer = new MutationObserver(function(mutations, observer) {
if(mutations[0].target.innerHTML !== mutations[0].oldValue) {
console.log('Body content changed!');
}
});
// 观察body元素的变化
const body = document.querySelector('body');
const config = { attributes: true, childList: true, subtree: true };
observer.observe(body, config);
当body的子内容或子元素发生变化时,MutationObserver
会被触发,并且如果检测到body的innerHTML
发生了变化,它会在控制台输出一条消息。
请注意,MutationObserver
可以监听所有类型的DOM变化,包括属性变化、节点添加、节点移除等。在上面的代码中,config
对象定义了我们想要观察的特定变化类型。
要停止监听变化,可以调用observer.disconnect()
方法。
这个办法可以用来监听页面某个对象元素是否已经加载到页面,然后再对该对象元素执行操作。