'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. Choose the best route

    hdu 2680:http://acm.hdu.edu.cn/showproblem.php?pid=2680 这道题值得一提的两点:在图论中注意重边问题是必须的,有向无向也是同等重要的,如这道题 f ...

  2. struts2不能通过ONGL方式取出request中的Atrribute

    请看下面一个很简单的Action package com.ahgw.main.action; import org.springframework.stereotype.Controller; /** ...

  3. android design library提供的TabLayout的用法

    在开发中,我们常常需要ViewPager结合Fragment一起使用,如下图: 我们可以使用三方开源的PagerSlidingTabStrip去实现,或者viewpagerindicator,我一般都 ...

  4. bzoj3437

    练一下斜率优化 ..] of int64; q,a,b:..] of longint; i,n,h,t,j:longint; function g(j,k:longint):double; var a ...

  5. 有关DOM的小总结

    一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起 ...

  6. Linux学习笔记13——使用curses函数库

    一 安装curses库 如果你的Linux系统中curses库,直接敲入命令sudo apt-get install libncurses5-dev,然后就会自动安装curses库,安装好之后敲入命令 ...

  7. TOMCAT启动完成但是ECLIPSE仍然显示starting....

    最近重新部署了一个TOMCAT服务,但是启动碰到个问题,虽然TOMCAT控制台已显示启动成功,但是ECLIPSE右下角仍然一直显示STARTING,最后TOMCAT超时,启动失败. 之前以为是拷贝工程 ...

  8. 深度学习Matlab DeepLearningToolBox 工具包最常见错误解决办法\

    deeplearningtoolbox  下载链接github : https://github.com/rasmusbergpalm/DeepLearnToolbox,只需要解压到matlab当前工 ...

  9. jquery 弹出层

    <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">   ...

  10. winform 加密 解密 分类: WinForm 2014-05-16 15:05 400人阅读 评论(0) 收藏

    界面显示: 加密: 解密: 代码实现: public string EncryptString(string str)         {             #region 加密程序       ...