'use strict';
let MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver
|| window.MozMutationObserver;
let observerMutationSupport = !!MutationObserver;
if(observerMutationSupport){
let observer = new MutationObserver((mutations) => {
mutations.forEach((item) => {
console.log(item);
});
});
const options = {
"childList" : true,//子节点的变动
"attributes" : true,//属性的变动
"characterData" : true,//节点内容或节点文本的变动
"subtree" : true,//所有后代节点的变动
"attributeOldValue" : true,//表示观察attributes变动时,是否需要记录变动前的属性
"characterDataOldValue" : true//表示观察characterData变动时,是否需要记录变动前的值
};
observer.observe(document,options);
}

利用MutationObserver对页面元素的改变进行监听的更多相关文章

  1. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  2. 利用 chunked 类型响应实现后台请求的监听

    Koa 中实现 chunked 数据传输 中介绍了如何在 Koa 中实现 Transfer-Encoding:chunked 类型的响应分片传输.这里来看一个应用场景. 假如我们想监听后台的请求,并将 ...

  3. 百度编辑器的内容改变事件监听bug

    先贴上我的初始化代码,可能是用法问题冤枉了百度编辑器,如果是我的用法有问题欢迎大侠们指正 <!DOCTYPE type> <html> <head> <met ...

  4. JS常用方法(获取Class、获取元素样式、事件监听、cookie、ajax等)

    var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...

  5. AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  6. 页面返回刷新或H5监听(手机的)返回键

    1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...

  7. 利用Python的pyHook包来进行键盘监听

    最近在实习的时候发现一件很蛋疼的事情,那就是我们组的项目因为有后台进程,所有每次运行完以后后台进程都必须要自己手动关闭,每次编译之前忘记关就会有一大堆编译错误,我就想直接弄个可以快捷键直接关闭算了   ...

  8. js 元素添加多个监听

    function addListener(element,e,fn){     if(element.addEventListener){         element.addEventListen ...

  9. Python+Selenium自动化-定位页面元素的八种方法

    Python+Selenium自动化-定位页面元素的八种方法   本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子. 0.元素定位方法主要有: id定位:find_elemen ...

随机推荐

  1. Contest20140906 反思

    这次考试最大的失误就是把最简单的一道题RE了,原因是我在main()函数中开了一个2^19的数组,这种做法在linux下没有任何问题,然而放到windows下评测,就会出现栈溢出的错误. 单题总结: ...

  2. Install php-mcrypt on CentOS 6

    http://stackoverflow.com/questions/17109818/install-php-mcrypt-on-centos-6

  3. 【 UVALive - 5095】Transportation(费用流)

    Description There are N cities, and M directed roads connecting them. Now you want to transport K un ...

  4. 【UVA11294】Wedding (2-SAT)

    题意: 有N-1对夫妻参加一个婚宴,所有人都坐在一个长长的餐桌左侧或者右侧,新郎和新娘面做面坐在桌子的两侧.由于新娘的头饰很复杂,她无法看到和她坐在同一侧餐桌的人,只能看到对面餐桌的人.任意一对夫妻不 ...

  5. Delphi_OD_代码_调试_Delphi反调试技术(以OD为例附核心原代码)

    1.程序窗口[chuang kou]句柄[ju bing]检测原理:用FindWindow函数[han shu]查找[cha zhao]具有相同窗口[chuang kou]类名和标题的窗口[chuan ...

  6. Haskell缩进规则

    Haskell也是使用缩进来表示一个表达式或者块延伸的范围的,这点与Python类似.Haskell的缩进规则简单总结起来只用下面三条:    1. 源文件中第一个顶级的定义或者声明的缩进,定义了该文 ...

  7. Unity 物体围绕圆周运动

    用Unity开发游戏中,经常会有搜寻的功能,这时候我们需要一个放大镜的图标在那圆周运动.写了相关脚本直接挂载在要圆周运动的物体上即可: using UnityEngine; using System. ...

  8. 移动大数据时代最IN编程语言必读书单

    移动大数据时代最IN编程语言必读书单 这是一个快速更迭,快鱼吃慢鱼的时代.从IT 时代演变成 DT 时代,再到现在的智能时代.急速革新的各种新技术.新工具.新平台,需要程序员掌握良好的编程思想和学习方 ...

  9. HDU-4902 Nice boat

    Nice boat Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Tot ...

  10. Android手机应用程序开发环境配置(Eclipse+Java+ADT)

    参考: Java手机游戏开发实例简明教程 http://dev.10086.cn/blog/?uid-82940-action-viewspace-itemid-1772 Eclipse下载: htt ...