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]
如果没有监听窗口变化,将会出现一下情况: ,通过InstanceID来 ...
- Linux 命令备忘
1.查看所有正在运行的进程:ps -A 2.运行一个可执行文件(切换到目标目录下,LinuxProject3为可执行文件名):./LinuxProject3
- 树莓派3 Raspberry系统安装samba
默认Raspberry不自带samb,需要手动安装. 如果默认的rasp源不好用的话,可以使用下面从网上找的: deb http://mirrors.cqu.edu.cn/Raspbian/raspb ...
- Ansible运维自动化
Ansible运维自动化 一.Ansible-playbook的初步使用 playbook的使用,playbook可以把ansible的模块进行组合 ln -s /usr/local/python/b ...
- 执行代码出现ImportError:attempted relative import with no known parent package
前言 在这篇文章中,我将会解析 ImportError: attempted relative import with no known parent package 这个异常的原因.当你在运行的py ...
- A记录、CNAME和URL转发区别
我们在做域名解析时,尤其是很多虚拟主机,大都会使用到CNAME解析,独立主机.VPS则用A记录较多,而URL转发则会在更换域名时用到,从设置效果来看,都是“解析”到一个“其它”URL地址,而实际上它们 ...
- 读完这一篇,字符串格式化界的“白富美”(f-strings)抱回家!
f-strings 从Python 3.6开始,新引入了一种字符串格式化方法,称为“格式化字符串常量”(formatted string literal),简称f-strings.相比于%.str.f ...
- 【转】redis实现的分布式锁
参考: 1. https://www.bbsmax.com/A/WpdKpM1zVQ/ 2.https://www.oschina.net/translate/redis-distlock
- leetcode 890. 查找和替换模式 Python
用模式的每个字母去当做key对应单词列表的每个字母value, 如果放进dict之前检测到key已经存在,就检测Word[i][j]是否是和已经存在的value一致,不一致就代表不匹配,break检查 ...
- mysql ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constrain fails
ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constrain fails. 可能是MySQL在In ...