文档章节

监听DOM上某一个元素是否发生变化,利用MutationObserver来监听元素变化

lwkai
 lwkai
发布于 01/18 17:38
字数 154
阅读 11
收藏 0
/**
 * 观察DOM是否发变化的事件
 * @type {MutationObserver|*}
 */
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var element = document.getElementById('publicHead');

var callback = function (records){
    records.map(function(record){
        console.log('Mutation type: ' , record.type);
        console.info('Mutation target: ' , record.target);
    });
};

var mo = new MutationObserver(callback);

var option = {
    'childList' : true,
    'subtree' : true
};

mo.observe(element, option);
// 停止观察
//mo.disconnect();


// 追加一个DIV进去,看看触发的事件
var el = document.createElement('div');
el.innerHTML = '<p>东奔西走<br/><br/>';
element.appendChild(el);

页面上的HTML代码:

<html>
<head></head>
<body>
<div id="publicHead"></div>
</body>
</html>

本人微信:  本人QQ:

© 著作权归作者所有

共有 人打赏支持
lwkai
粉丝 2
博文 19
码字总数 7246
作品 0
深圳
技术主管
私信 提问
JavaScript 工作原理之十-使用 MutationObserver 监测 DOM 变化

原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第十章。 网络应用在客户端日...

tristan
2018/06/07
0
0
JavaScript是如何工作的:使用MutationObserver跟踪DOM的变化

摘要: 掌握MutationObserver。 原文:JavaScript是如何工作的:使用 MutationObserver 跟踪 DOM 的变化 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及...

Fundebug
01/10
0
0
vue watch数组引发的血案

总结 变异方法 Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新,这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 替换数组 变异方法,顾名思义,会改...

空白2017
2018/10/31
0
0
实现一个简单的双向绑定

接触Vue有一段时间了,但是对于其双向绑定的实现一直是似懂非懂,今天看到一篇写的比较好的文章 传送门1 根据原作者的指导自己也去实现了一遍简单的 demo (本文的demo均基于Object.definePr...

昵称不能随便取
2017/09/18
0
0
【前端安全】JavaScript防http劫持与XSS

作为前端,一直以来都知道与(Cross-site scripting)、(Cross-site request forgery)。但是一直都没有深入研究过,前些日子同事的分享会偶然提及,我也对这一块很感兴趣,便深入研究了一番...

chokcoco
2016/08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

.net Int16 、(int Int32)、 Int64 的区别

.net Int16 、(int Int32)、 Int64 的区别 easonjim 2015-09-25 01:41:00 浏览129 评论0 Framework html 存储 数据类型 摘要: 关于什么是16位整数,32位整数,64位整数,请看这里:http://ww...

linjin200
9分钟前
0
0
jsch密钥连接远程Linux报错com.jcraft.jsch.JSchException: invalid privatekey: [B@277050dc

jsch密钥连接远程Linux报错,信息如下: Exception in thread "main" com.jcraft.jsch.JSchException: invalid privatekey: [B@277050dcat com.jcraft.jsch.KeyPair.load(KeyPair.java:6......

尚浩宇
10分钟前
0
0
做JAVA开发的同学一定遇到过的爆表问题,看这里解决

背景:Java线上服务运行一周后,某个周六晚上CPU使用率突然持续99%,Java进程处于假死状态,不响应请求。秉着先恢复服务再排查问题的原则,在我连接VPN采用重启大法后,CPU使用率恢复正常,服...

编程SHA
12分钟前
1
0
知乎大佬推荐的4个高质量的微信小程序,每一个都让你用的放心!

很多时候身边的朋友总是见我手机都是很简洁,没有过多的APP去填充,这时他们都会问我,为什么我的手机上软件这么少,够用吗?而我的回答就是,够用,软件不在于多,而在于好用,当然我手机上...

架构师springboot
13分钟前
0
0
初学数据结构--跳跃表

Skip List的工作原理 Skip List(跳跃表)是一种支持快速查找的数据结构,插入、查找和删除操作都仅仅只需要O(log n)对数级别的时间复杂度,它的效率甚至可以与红黑树等二叉平衡树相提并论,...

loubobooo
17分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部