# [在线预览](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)

```

JS-监听整个页面上的DOM树变化的更多相关文章

  1. 监听整个页面上的DOM树变化

    在线预览 方法 使用<Web API 接口>的<MutationObserver> MutationObserver 网上查到的很多都是使用Mutation events的,但 ...

  2. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  3. 原生Js监听普通dom尺寸变化

    原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...

  4. 【转】keyCode对照表及JS监听组合按键

    原文: http://blog.csdn.net/qq_21386275/article/details/67640576 有一些需求,html 页面上的input 框只允许输入数字,  只允许输入小 ...

  5. js 监听整个页面的回车事件

    JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch;      ...

  6. 原 JS监听回车事件

    原 JS监听回车事件 发表于2年前(2014-06-04 10:16)   阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏 赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦  ...

  7. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  8. js监听用户的键盘敲击事件,兼容各大主流浏览器

    js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...

  9. JS监听组合按键

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 下面简单梳理一下思路: 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete ...

随机推荐

  1. pytho装饰器参数那些事_inspect.getcallargs

    ''' Created on Jul 26, 2019 @author: tomcat ''' import inspect def chack_admin(func): def wrapper(*a ...

  2. 用 Flask 来写个轻博客 (26) — 使用 Flask-Celery-Helper 实现异步任务

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Celery 将 Celery 加入到应用中 实现向新用户发 ...

  3. 记录一些比较长的adb命令,复制用

    adb shell content query --uri content://settings/secure --projection value --where "name=\'andr ...

  4. 测开之路四十五:Django之最小程序

    安装Django库 Django最小程序 import sysfrom django.conf.urls import urlfrom django.conf import settingsfrom ...

  5. crontab 使用

    1. 安装,结构 yum install cronie 结构: * * * * * [分钟] [小时] [每月的某一天] [每年的某一月] [每周的某一天] 2.命令 1,添加或更新crontab中的 ...

  6. python排序算法-冒泡和快速排序,解答阿里面试题

    ''常见的排序算法\ 插入排序/希尔排序/直接排序/堆排序 冒泡排序/快速排序/归序排序/基数排序 给定一个列表,将这个列表进行排序,要求:> 时间复杂度要小于O(n^2) 复杂度:1.时间复杂 ...

  7. Day 56 jquery

    一 .事件委托实例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  8. Android深度探索-卷1第三章心得体会

    第三章整章介绍了git,git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.通过配置git后可以很方便的找到需要的资源,更多的是代码和包,可以在本地建立版本库,为了 ...

  9. 【一起学源码-微服务】Nexflix Eureka 源码三:EurekaServer启动之EurekaServer上下文EurekaClient创建

    前言 上篇文章已经介绍了 Eureka Server 环境和上下文初始化的一些代码,其中重点讲解了environment初始化使用的单例模式,以及EurekaServerConfigure基于接口对外 ...

  10. 用u盘和iso镜像文件装win8.1系统

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xyl295528322/article/details/37910939 原料: 1.老毛桃U盘启动 ...