js动态监听dom变化
原生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变化的更多相关文章
- js实时监听dom尺寸变化
开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver Resi ...
- 对于单页应用中如何监听 URL 变化的思考
周末开发了一个在 GitHub 中给 repo 增加自定义备注的 chrome 扩展. 开发这个扩展的原因是我在 GitHub 中所 star 的项目实在太多了(截止目前 671 个),有的项目过个几 ...
- JS监听DOM结构变化
在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...
- vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- 监听窗口大小变化,改变画面大小-[Three.js]-[onResize]
如果没有监听窗口变化,将会出现一下情况: 映射到一个结果集当中. resultMap包含的元素: <!--column不做限制,可以为任意 ...
- xamarin android 文件选择
调出选择界面: Intent intent = new Intent(Intent.ActionGetContent); intent.AddCategory(Intent.CategoryOpena ...
- java8_api_jdbc
jdbc-1 jdbc的概念 驱动的分类 连接oracle数据库 与任何表格数据源交互 代码编写步骤 加载驱动 Cla ...
- 2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解
2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解 NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP汇编指令:执行到NOP指令时,CPU仅仅当做一个 ...
- 如何编译luabind支持vs2010之后所有版本
步骤 下载https://github.com/luabind/luabind/tree/0.9. 其最后一次commit为 Revision: 8c66030818f0eacbb7356c16776 ...
- QQ浏览器中时区bug
在QQ浏览器 4.4.119.400 版本中,通过new Date('2018-11-11').getTime(); 获取的时间不是东8区的时间戳,而是0时区的时间戳,这就导致了获取的时间与实际的时间 ...
- python selenium 处理时间日期控件(十六)
测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日 ...
- C 标准库头文件
头文件 说明 头文件 说明 <assert.h> 条件编译宏,将参数与零比较 <complex.h> (C99 起) 复数运算 <ctype.h> 用来确定包含于字 ...
- python爬虫---selenium库的用法
python爬虫---selenium库的用法 selenium是一个自动化测试工具,支持Firefox,Chrome等众多浏览器 在爬虫中的应用主要是用来解决JS渲染的问题. 1.使用前需要安装这个 ...
- Winfrom BackgroundWorker
using System; using System.Collections.Generic; using System.ComponentModel; using System.Reflection ...