原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑

// Firefox和Chrome早期版本中带有前缀  
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver  
  
// 选择目标节点  
var target = document.querySelector('#some-id');  
   
// 创建观察者对象  
var observer = new MutationObserver(function(mutations) {  
  mutations.forEach(function(mutation) {  
    console.log(mutation.type);  
  });      
});  
   
// 配置观察选项:  
var config = { attributes: true, childList: true, characterData: true }  
   
// 传入目标节点和观察选项  
observer.observe(target, config);  
   
// 随后,你还可以停止观察  
observer.disconnect(); 

浏览器支持情况:

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://lcddjm.com/article/5a9fac195809d15ba1019710 © www.lcddjm.com

js动态监听dom变化的更多相关文章

  1. js实时监听dom尺寸变化

    开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver Resi ...

  2. 对于单页应用中如何监听 URL 变化的思考

    周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展. 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几 ...

  3. JS监听DOM结构变化

    在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...

  4. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  5. 监听窗口大小变化,改变画面大小-[Three.js]-[onResize]

    如果没有监听窗口变化,将会出现一下情况: ![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200102081845027-2 ...

  6. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  7. 详解vuex结合localstorage动态监听storage的变化

    这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...

  8. node.js监听文件变化

    前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...

  9. MutationObserver 监听DOM树变化

    1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...

随机推荐

  1. [R] [Johns Hopkins] R Programming 作業 Week 2 - Air Pollution

    Introduction For this first programming assignment you will write three functions that are meant to ...

  2. 关于jeesite的陷阱需要注意

    jeesite,其框架主要为: 后端 核心框架:Spring Framework 4.0 安全框架:Apache Shiro 1.2 视图框架:Spring MVC 4.0 服务端验证:Hiberna ...

  3. day03 文件操作

    目录 1.文件操作实例 2.文件常用操作 3.with模块操作文件 常用实例,把文件里面的内容读出来做成字典的形式在做成字列表展示. 1.精简版. lst = []f = open("fil ...

  4. IPv6学习笔记

    IPv6简写规范: 1)  每个IPv6地址段起始的0可以被省略: 2)  如果一段为4个零,可以简写为一个0 3)  如果有连续的多个段全为0,则可以使用::表示 注:一个地址段中只能有一个::出现 ...

  5. hanlp 加载远程词库示例

    说明 ·目前的实现方式是以远程词库的内容重新构建CustomDictionary.trie,demo主要是为了实现同步远程词库,对性能暂不作考虑,对性能要求要以CustomDictionary.dat ...

  6. 漫画|Linux 并发、竞态、互斥锁、自旋锁、信号量都是什么鬼?(转)

    知乎链接:https://zhuanlan.zhihu.com/p/57354304 1. 锁的由来? 学习linux的时候,肯定会遇到各种和锁相关的知识,有时候自己学好了一点,感觉半桶水的自己已经可 ...

  7. 支持向量机(Support Vector Machine,SVM)

    SVM: 1. 线性与非线性 核函数: 2. 与神经网络关系 置信区间结构: 3. 训练方法: 4.SVM light,LS-SVM: 5. VC维 u-SVC 与 c-SVC 区别? 除参数不同外, ...

  8. WinForm外包公司 WInform外包项目监控案例展示

    北京动点飞扬软件开发团队 C# WInform监控项目案例展示 长年承接WInForm C#项目开发,商业案例欢迎联系我们索取 有相关项目外包定制开发 欢迎联系我们 qq372900288 Tel 1 ...

  9. FPGA例化ROM存储表格

    FPGA例化ROM存储表格 1.选择ROM 2.填写数据位宽和深度 3.加载ROM初始化信息,coe文件

  10. Hello 2019

    2019也要创造价值! 热爱生活!