【我不熟悉的javascript】各种监控html元素变化的方法，MutationObserver ，intersectionObserver，resizeObserver_js监听html元素值变化

作者：Monodyee | 2024-03-12 07:55:42

踩

js监听html元素值变化

今天总结三个不熟悉但是很有用的web api，可以监控任意的html元素的变化。

接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

如果要监控元素的css属性、位置等变化的时候可以用到

接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为**根 (root)。

这个可以用来判断元素是否超出视口的范围，比如在自定义popoverd的弹出框popper组件的时候

接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距 padding。（有关内容区域、内边距资料见盒子模型）

这个可以用来监控一个元素的放大和缩小，就是类似window的resize的功能一样

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/223106