这三个观察者(Observers)都属于Web API,允许开发人员监测DOM元素或其内容的变化,并在发生变化时执行相应的操作。它们之间有一些区别和适用场景
一、MutationObserver
MutationObserver接口提供了一种异步机制来观察DOM树的变化,并在变化发生后触发回调函数。它能够监听DOM节点的属性、子节点的添加/删除以及文本节点的更改等。
1.1用法
const observer = new MutationObserver(callback);
// 配置需要观察的变化类型
const config = { attributes: true, childList: true, subtree: true };
// 开始观察目标节点
observer.observe(targetNode, config);
1.2案例
const callback = (mutationsList, observer) => {
for (let mutation of mutationsList) {
const { removedNodes, type, target } = mutation;
if (type === 'childList') {
console.log('子节点发生改变.');
} else if (type === 'attributes') {
console.log('属性值发生改变');
}
}
};
const observer = new MutationObserver(callback);
const targetNode = document.getElementById('waterMark');
const config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);
上面简单案例中用到一些属性及配置项,MutationObserver文档讲解得也比较详细,具体请参考 MutationObserver文档
1.3 特点
- MutationObserver适用于需要监测DOM树变化的情况,如观察
节点添加、删除和属性更改
等。 - MutationObserver是异步的,它会等待DOM操作完成后才触发回调函数。
- MutationObserver可以观察
整个DOM树或特定节点及其子树
。
二、IntersectionObserver
IntersectionObserver接口提供了一种异步机制来观察目标元素与其祖先元素或视窗(viewport)之间的交叉状态。它常用于实现懒加载、无限滚动等场景。
2.1 用法
const observer = new IntersectionObserver(callback, options);
// 开始观察目标元素
observer.observe(targetElement);
2.2 案例
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('视线中');
} else {
console.log('视线外');
}
});
};
const observer = new IntersectionObserver(callback);
const targetElement = document.querySelector('.lazy-load');
observer.observe(targetElement);
上面简单案例中用到一些属性及配置项,IntersectionObserver文档讲解得也比较详细,具体请参考 IntersectionObserver文档
2.3 特点:
- IntersectionObserver适用于需要监测元素与视窗(或其祖先元素)之间的交叉状态的情况。
- IntersectionObserver是异步的,它会将元素进入或离开视窗的信息传递给回调函数。
- IntersectionObserver可以同时观察多个目标元素,并提供了一些配置选项,如root、rootMargin和threshold。
三、ResizeObserver
ResizeObserver接口提供了一种异步机制来观察目标元素的尺寸变化,当目标元素的大小发生变化时,会触发回调函数。
3.1 用法
const observer = new ResizeObserver(callback);
// 开始观察目标元素
observer.observe(targetElement);
3.2 案例
const callback = (entries, observer) => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
console.log(width, height );
});
};
const observer = new ResizeObserver(callback);
const targetElement = document.getElementById('.box');
observer.observe(targetElement);
上面简单案例中用到一些属性及配置项,ResizeObserver文档讲解得也比较详细,具体请参考 ResizeObserver文档
3.3 特点
- ResizeObserver适用于需要监测元素尺寸变化的情况,如
自适应布局、动态调整
等。 - ResizeObserver是异步的,在目标元素大小变化后才触发回调函数。
- ResizeObserver
只能观察单个目标元素的尺寸变化
。
https://www.zhangxinxu.com/wordpress/2023/08/js-performanceobserver-api/