1. 'use strict';
  2. let MutationObserver = window.MutationObserver
  3. || window.WebKitMutationObserver
  4. || window.MozMutationObserver;
  5. let observerMutationSupport = !!MutationObserver;
  6. if(observerMutationSupport){
  7. let observer = new MutationObserver((mutations) => {
  8. mutations.forEach((item) => {
  9. console.log(item);
  10. });
  11. });
  12. const options = {
  13. "childList" : true,//子节点的变动
  14. "attributes" : true,//属性的变动
  15. "characterData" : true,//节点内容或节点文本的变动
  16. "subtree" : true,//所有后代节点的变动
  17. "attributeOldValue" : true,//表示观察attributes变动时,是否需要记录变动前的属性
  18. "characterDataOldValue" : true//表示观察characterData变动时,是否需要记录变动前的值
  19. };
  20. observer.observe(document,options);
  21. }

利用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. http server v0.1_http_parse.c

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include "mime.h&q ...

  2. 【Java】Checked、Unchecked Exception

    Checked Exception:需要强制catch的异常, Unchecked Exception:这种异常时无法预料的,即RuntimeException,就是运行时的异常. Exception ...

  3. ibatis把表名作为一个参数报错问题的解决方案

    用ibatis的时候,想把表名也作为一个参数传进去,可是报错了,在ibatis配置文件里面是#resource#的方式,报错信息如下: org.apache.cxf.interceptor.Fault ...

  4. (转)Mono for Android 优势与劣势

    最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映射标准的Andriod API.例如,两边API几乎 ...

  5. bootstrap真是个好东西

    之前就知道有bootstrap这么个东东,但是因为本身不做web,也就没有仔细了解.这次一个项目合作方使用django和bootstrap做的,有机会接触了一些,感觉确实非常好! 今天下午利用一个下午 ...

  6. Delphi使用NativeXml访问XML文件

    Delphi使用NativeXml访问XML文件 1.创建XML文件var Doc: TNativeXml;//声明上下文对象var filepath:string;//文件路径DOC:=TNativ ...

  7. CnPack for delphi xe5

    CnPack Team is made up of Chinese Programmers and Delphi / C++ Builder fans across the Internet. Our ...

  8. Selenium稳定性 Test

    [Test] public void DriverExtension_Wait() { var driver = new FirefoxDriver(); driver.Navigate().GoTo ...

  9. HDOJ1020 Encoding

    Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...

  10. 龙芯8089_D安装debian 8 iessie

    参考官方文档:https://wiki.debian.org/DebianYeeloong/HowTo/Install 下载网络引导文件后使用tftpd建立ftfp服务器,然后使用PMON tftp来 ...