MutationObserver、IntersectionObserver和ResizeObserver的用法和区别：

最新推荐文章于 2025-04-01 20:01:03 发布
最新推荐文章于 2025-04-01 20:01:03 发布
阅读量428 收藏
点赞数 5
分类专栏： javascript 文章标签： javascript 前端 chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45532665/article/details/134162568
版权
本文介绍了MutationObserver、IntersectionObserver和ResizeObserver这三种Web API，它们都是异步观察DOM变化的工具。MutationObserver关注DOM树的修改，IntersectionObserver检测元素与视窗的交叉状态，适配懒加载等场景，而ResizeObserver则用于元素尺寸变化的监测。每种观察者都有其特定的使用场景和配置选项，可实现不同功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

这三个观察者（Observers）都属于Web API，允许开发人员监测DOM元素或其内容的变化，并在发生变化时执行相应的操作。它们之间有一些区别和适用场景

一、MutationObserver

MutationObserver接口提供了一种异步机制来观察DOM树的变化，并在变化发生后触发回调函数。它能够监听DOM节点的属性、子节点的添加/删除以及文本节点的更改等。

1.1用法

const observer = new MutationObserver(callback);

// 配置需要观察的变化类型
const config
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【JS】详解浏览器的5 种Observer: Mutation、Intersection、Performance、Resize、Reporting
余浩的博客
08-13 1091
监听用户的交互行为，我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件，但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印。
初识三大 Observer
m0_51244077的博客
12-13 1489
初识三大 Observer
【深入理解 MutationObserver、PerformanceObserver、ResizeObserver 和 IntersectionObserver】
weixin_54188159的博客
02-16 2442
深入理解 MutationObserver、PerformanceObserver、ResizeObserver 和 IntersectionObserver
Web中原生内置的Observer方法们：MutationObserver、IntersectionObserver与ResizeObserver
最新发布
piaochen0的博客
04-01 696
在现代Web开发中，Observer（观察者）模式是实现事件驱动架构的一种重要方式。H5及相关的JavaScript API引入了多种Observer，使得开发者能够更加高效地监听DOM变化、Intersection状态等。下面，本文将介绍几种重要的Observer及其使用示例。
IntersectionObserver, ResizeObserver, MutationObserver总结介绍
一曲红尘诀
01-17 1781
js如何监听元素是否出现在可视区域, 元素尺寸是否变化， 元素DOM是否变化, 包括元素子元素, 元素属性等等的监听, 以及对应的任务是宏任务还是微任务。
MutationObserver和ResizeObserver
m0_70542915的博客
05-10 503
近期大屏项目需要根据屏幕尺寸调整dom尺寸，开始我使用的MutationObserver，过程中发现当dom元素尺寸为准确的像素值（如100px）时，当使用事件调整dom尺寸时，MutationObserver对象可以监听到，但当dom尺寸为百分比时无论尺寸怎么变化都无法监听到。可以在构造函数的回调函数中执行对应的dom处理，每次监听到dom对象尺寸的改变都会执行该回调函数。当dom尺寸为百分比时 无论浏览器尺寸如何变化，css样式的属性值并没有变化。
MutationObserver、IntersectionObserver、ResizeObserver （转载）
全栈小菜鸟
08-09 2259
前言 阅读本文你可以获取到以下3个知识点 通过原生javascript的API 监听DOM元素的改变（文字、大小、背景等等）监听DOM元素之间是否相交等信息监听DOM元素大小改变，基本可以放弃全局监听window.rize了 动动小手，先点赞再观看???????????? MutationObserver MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Events规范的一部分...
MutationObserver、IntersectionObserver、ResizeObserver
Jsoning的博客
03-09 2327
前言 阅读本文你可以获取到以下3个知识点 通过原生javascript的API 监听DOM元素的改变（文字、大小、背景等等） 监听DOM元素之间是否相交等信息 监听DOM元素大小改变，基本可以放弃全局监听window.rize了 动动小手，先点赞再观看???????????? MutationObserver MutationObserver 创建一个观察器，提供了对监视DOM树更改的能力，是DOM3 Even...
VisibilityObserver:用于观察元素可见框的实验性API
04-15
将来，可以将该库重构为使用ResizeObserver ， MutationObserver ， IntersectionObserver和scroll事件，以提高性能。 安装 npm install --save visibilityobserver 用法 import VisibilityObserver from ...
MutationObserver 变动观察器
shuxiaoxii的博客
08-19 384
MutationObserver MutationObserver.observe() config的配置项 定义 DOM 规范中的 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器，它会在触发指定 DOM 事件时，调用指定的回调函数。MutationObserver 对 DOM 的观察不会立即启动；而必须先调用 observe() 方法来确定，要监听哪一部分的 DOM 以及要响应哪些更改。 var observer
element-observer:MutationObserver启发了自定义元素的观察者，例如任何DOM元素上的突变
04-01
元素观察者 MutationObserver启发了自定义元素的观察者，例如任何DOM元素上的突变。 import ElementObserver from '@webreflection/element-observer' ; const observer = new ElementObserver ( { // optional, used only if options for attributes are used attributeChangedCallback ( element , name , oldValue , newValue ) { // all observed attributes will be triggered right away if present, // when the element is observed, and *
MutationObserver
weixin_30340353的博客
07-16 262
一、MutationObserver Config childList： 添加、删除目标节点的子节点时会收到通知（子节点的后代节点添加或删除时不会收到通知） attribute： 修改目标节点属性时会收到通知 characterData： 观察目标节点下所有文本类型节点（即子代或后代）的文字变化（注意：添加、删除文本节点不会被观察到，如果改变之前的类型不是文本节点也不会被...
Mutation Observer
qq_39527734的博客
01-01 582
Mutation Observer Mutation Event
JavaScript核心之变动观察器（Mutation Observer）
上善若泪
05-03 8509
目录 1 变动观察器（mutation observer）概述 2 MutationObserver构造函数 3 Mutation Observer实例的方法 3.1 observe() 3.2 disconnect()，takeRecords（） 3.3 MutationRecord对象 4 应用示例 4.1 子元素的变动 4.2 属性的变动 4.3 取代DOMContent...
JavaScript 中的 MutationObserver
qq_43730272的博客
02-19 478
JavaScript 中的 MutationObserver 是用于异步观察 DOM 变化的接口，能够监控节点的添加、移除、属性修改等操作。获取原始文本：使用 nodeValue 获取节点的文本内容，并去除前后空格。检查节点类型：如果节点是文本节点。
MutationObserver是什么
m0_57236802的博客
09-03 1087
是一个JavaScript API，用于监控DOM（文档对象模型）的变化。当观察的DOM元素或其子元素发生变化时，它会触发一个回调函数。这使得你可以在元素添加、删除或修改时执行特定的操作。这个API非常有用，尤其是在需要实时响应DOM变化的场景中，例如单页应用（SPA）或动态加载内容的网站。
MutationObserver应用
id123152的博客
12-13 346
可以用来监视DOM任何变化，比如属性变动、节点变化、文本内容变化等。从概念上接近于事件，区别是：事件是同步触发的；是异步触发的，DOM的变化不会立马触发而是等到所有的DOM操作都结束之后，这样是为了应变DOM变化频繁的特点。有以下特点：它会等待所有的脚本执行完后再执行（异步触发方式）它把DOM变化记录封装成一个数组进行处理，而不是单一处理DOM变化它可以观察DOM的所有类型变化，也可以指定观察某一类型。
ng-observers:Angular的元素观察者API指令实现
它封装了浏览器的原生观察者API（包括ResizeObserver，MutationObserver和IntersectionObserver），使得开发者能够方便地在Angular项目中使用这些API来监控DOM元素的特定变化。 1. ResizeObserver ResizeObserver ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值