JS-监听整个页面上的DOM树变化

# [在线预览](https://jsfiddle.net/1010543618/fyf913t0/) ## 方法 - 使用《Web API 接口》的《MutationObserver》 [MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver) 网上查到的很多都是使用 Mutation events 的,但在 MDN 上一查这个事件已经废弃了,并且推荐用 MutationObserver 替换掉 > Deprecated > This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. > > Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM. Use Mutation Observers instead if possible. ```html Document

下述方法也可以监听使用《谷歌页面翻译》时的DOM变化

The following way also can catch changes of DOM when using Google page translation

使用MutationObserver(Using MutationObserver)

Hello Mr. Word!
添加(add DOM) ```

转载于:https://www.cnblogs.com/jffun-blog/p/10206588.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面变化可以被多个事件监听,具体取决于页面上发生了哪些变化以及你希望监听哪些事件。以下是一些常见的与页面变化相关的事件: 1. `DOMContentLoaded` 事件: 该事件在页面所有的 DOM 内容都已经加载完成并且解析完毕后触发。通常用于在页面初始化时执行一些操作。 ```javascript document.addEventListener('DOMContentLoaded', function() { // 页面加载完成时执行的操作 }); ``` 2. `load` 事件: 该事件在整个页面及其所有依赖资源(如图片、样式表、脚本等)都已经加载完成后触发。常用于在页面完全加载后执行某些操作。 ```javascript window.addEventListener('load', function() { // 页面及其依赖资源都加载完成时执行的操作 }); ``` 3. `resize` 事件: 该事件在窗口大小调整时触发。可以用于响应页面布局的变化。 ```javascript window.addEventListener('resize', function() { // 窗口大小调整时执行的操作 }); ``` 4. `hashchange` 事件: 该事件在 URL 中的锚点部分发生变化时触发。可以用于监听 URL 锚点的变化,例如单页应用中的路由切换。 ```javascript window.addEventListener('hashchange', function() { // URL 锚点变化时执行的操作 }); ``` 以上仅是一些常见的事件,实际上还有许多其他事件可以用于监听页面变化。你可以根据具体的需求选择适合的事件来监听页面变化。希望能对你有所帮助!如有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值