'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. bzoj 2049: [Sdoi2008]Cave 洞穴勘测 动态树

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 3119  Solved: 1399[Submit] ...

  2. Optimal Milking

    poj2112:http://poj.org/problem?id=2112 题意:K台挤奶机器,C头牛,K不超过30,C不超过200,每台挤奶机器最多可以为M台牛工作,给出这些牛和机器之间,牛和牛之 ...

  3. Java OAuth开发包资料

    原文地址:http://www.oschina.net/project/tag/307/oauth?lang=19&sort=time

  4. Javascript函数中传递带空格的参数

    通常在页面中要让某些内容点击后产 生点击事件(非页面跳转)都会使用onclick,但是这样不适于需要传递参数的情况,于是写成直接调用Javascript函数的方式:<a href=javascr ...

  5. Qt 窗体的模态与非模态(setWindowFlags(Qt::WindowStaysOnTopHint);比较有用,还有Qt::WA_DeleteOnClose)

    概念 模态对话框(Modal Dialog)与非模态对话框(Modeless Dialog)的概念不是Qt所独有的,在各种不同的平台下都存在.又有叫法是称为模式对话框,无模式对话框等. 1. 模态窗体 ...

  6. 浅谈Redis及其安装配置

    一.Redis的介绍 二.Redis的安装配置 三.Redis的配置文件说明 四.Redis的简单操作 简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型. ...

  7. 【转】Java ConcurrentModificationException 异常分析与解决方案--还不错

    原文网址:http://www.2cto.com/kf/201403/286536.html 一.单线程 1. 异常情况举例 只要抛出出现异常,可以肯定的是代码一定有错误的地方.先来看看都有哪些情况会 ...

  8. php5.4下安装ECshop出现错误的解决办法

    转:http://www.programmernote.com/?p=65 1.安装是会提示 Warning: date_default_timezone_get(): It is not safe ...

  9. UIView hitTest的原理

    [转自:http://blog.sina.com.cn/s/blog_59fb90df0101ab26.html] UIView 两个方法: - (UIView *)hitTest:(CGPoint) ...

  10. Hadoop yarn配置参数

    参照site:http://hadoop.apache.org/docs/r2.6.0/hadoop-yarn/hadoop-yarn-common/yarn-default.xml 我们在配置yar ...