强大的DOM变化观察者MutationObserver

时间:2023-01-01 20:56:11

在这之前 DOM3 提供了 Mutation events 事件

  1. DOMAttrModified
  2. DOMAttributeNameChanged
  3. DOMCharacterDataModified
  4. DOMElementNameChanged
  5. DOMNodeInserted
  6. DOMNodeInsertedIntoDocument
  7. DOMNodeRemoved
  8. DOMNodeRemovedFromDocument
  9. DOMSubtreeModified

可以监听到属性、文本内容、节点插入删除、子节点变化等事件。可是该事件 W3C 已废弃,虽然一些浏览器仍然支持,但不建议使用。

MutationObserver目前IE11+及其它浏览器最新版本都已支持。可以通过以下代码判断是否支持

var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver; var supportMutationObserver = !!MutationObserver;

使用如下

var mo = new MutationObserver(callback);
var div = document.querySelector('div'); var options = {
'childList': true,
'arrtibutes': true
}; mo.observer(div, options);

options 是配置参数,这里的配置可以观察到 div 元素的子元素和属于变动。

options 有如下选项

  1. childList: 子元素的变动
  2. attributes: 属性的变动
  3. characterData: 节点内容或节点文本的变动
  4. subtree: 所有下属节点(包括子节点和子节点的子节点)的变动
  5. attributeOldValueL: 值为true或者为false。如果为true,则表示需要记录变动前的属性值
  6. characterDataOldValue: 值为true或者为false。如果为true,则表示需要记录变动前的数据值
  7. attributesFilter: 值为一个数组,表示需要观察的特定属性(比如['class', 'str'])

当变动发生时回调函数会将变动记录 MutationRecord 对象传入,MutationRecord 包含了 DOM 的相关信息,有如下属性

  1. type: 观察的变动类型(attribute、characterData或者childList)
  2. target: 发生变动的DOM对象
  3. addedNodes: 新增的DOM对象
  4. removeNodes: 删除的DOM对象
  5. previousSibling: 前一个同级的DOM对象,如果没有则返回null
  6. nextSibling: 下一个同级的DOM对象,如果没有就返回null
  7. attributeName: 发生变动的属性。如果设置了attributeFilter,则只返回预先指定的属性
  8. oldValue: 变动前的值。这个属性只对attribute和characterData变动有效,如果发生childList变动,则返回null

示例1:观察子元素的变动

function callback(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob = new MutationObserver(callback)
ob.observe(app1, {
childList: true,
subtree: true
})

p1

app1

配置项 childList 表示观察子元素,subtree 表示观察子元素的下级元素。在本页面的浏览器控制台输入以下代码分别测试

app1.removeChild(p1)

app1.appendChild(document.createTextNode('TEST'))

示例2:观察属性的变化

function callback2(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob2 = new MutationObserver(callback2)
ob2.observe(app2, {
attribute: true,
attributeOldValue: true
})
app2

配置参数跟踪属性变动('attributes': true),然后设定记录变动前的值。实际发生变动时,会将变动前的值显示在控制台。打开本页面的浏览器控制台,输入以下代码测试

app2.id = 'apptest'

示例3:观察文本元素的变化

function callback3(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
characterData: true
})

示例3:观察元素内容的变动

function callback3(records) {
records.forEach(function(record) {
console.log(record)
})
}
var ob3 = new MutationObserver(callback3)
ob3.observe(app3, {
childList: true,
characterData: true,
characterDataOldValue: true
})
old value

配置项会观察元素文本的变化,当变动时会记录老的文本元素。打开本页面的浏览器控制台,输入以下代码测试

app3.appendChild(document.createTextNode(' hello'))

相关:

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

https://dev.opera.com/articles/mutation-observers-tutorial/

http://michalbe.blogspot.com/2013/04/javascript-less-known-parts-dom.html

强大的DOM变化观察者MutationObserver的更多相关文章

  1. MutationObserver DOM变化的观察

    简单的给MutationObserver做个测试及总结笔记. MutationObserver,window上的一个(构造)函数,可以通过其创建的观察者(观察对象)达到观察DOM的变化的效果. 可适用 ...

  2. How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化

    个人总结: 这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver. 注意:不要和Vue.js种 Object.defineProperty() 的 ...

  3. JavaScript 工作原理之十-使用 MutationObserver 监测 DOM 变化

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

  4. js动态监听dom变化

    原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationO ...

  5. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  6. html DOM 变化 通知,很好很强大

    刚做一个项目,某个div标签显示后 需要接收一个事件,用于主动调用 window.resize(): 从网上找了了,发现 MutationObserver.给开发者们提供了一种能在某个范围内的DOM树 ...

  7. DOM变化后事件绑定失效

    第一个file在change时,是能够触发事件的,而第二插入的file则没有change事件.对于这个问题,有如下两种解决方法: 第一种是将绑定change事件封装成一个函数,在点击button按钮插 ...

  8. JS函数节流代码实现

    函数被频繁调用场景 Js中的函数大多数情况下都是由用户主动调用触发的,一般不会遇到性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制.在这些场景下,函数有可能被非常频繁地调用,而造成大的 ...

  9. js dom 观察者属性 MutationObserver

    MDN上说的很清楚 MutationObserver给开发者们提供了一种能在某个范围内的DOM树发生变化时作出适当反应的能力.该API设计用来替换掉在DOM3事件规范中引入的Mutation事件 co ...

随机推荐

  1. elasticsearch【cat API,系统数据】指令汇总

    本博文讲述的ES获取系统数据的API是基于Elasticsearch 2.4.1版本的. 0. overview a. 下面将要介绍的所有的指令,都支持一个查询参数v(verbose),用来显示详细的 ...

  2. CodeIgniter 发送邮件

    1. 在config目录中增加email.php $config['charset'] = 'utf-8'; $config['wordwrap'] = TRUE; $config['protocol ...

  3. 在wdcp环境下架设VSFTPD虚拟用户只上传功能服务器

    检查系统是否已安装vsftp rpm -q vsftpd package vsftpd is not installed #说明系统没有安装vsftpd 如果生成虚拟用户数据文件的时候出现以下错误 u ...

  4. Android---App Widget(一)

    本文译自:http://developer.android.com/guide/topics/appwidgets/index.html App Widgets是一些较小的应用程序窗口,它们能够被嵌入 ...

  5. Android 用 camera2 API 自定义相机

    前言 笔者因为项目需要自定义相机,所以了解了一下 Android 关于 camera 这块的 API.Android SDK 21(LOLLIPOP) 开始已经弃用了之前的 Camera 类,提供了 ...

  6. C++实现的控制台-贪吃蛇

    周六终于可以抽出一整段时间了 想了想就写个贪吃蛇吧    第一次写 差不多下了140行  也不算太多吧 以后ACM比赛是在做不来就自己打个贪吃蛇玩 ps:本来想写个项目的 但是为了方便你们阅读 就写在 ...

  7. 两两交换链表中的节点(java实现)

    题目: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你应该返回 ...

  8. 云笔记项目-Spring事务学习-传播NEVER

    接下来测试事务传播属性NEVER Service层 Service层中设置事务传播属性都为NEVER. LayerT层代码 package LayerT; import javax.annotatio ...

  9. 【BZOJ1568】[JSOI2008]Blue Mary开公司(李超线段树)

    [BZOJ1568][JSOI2008]Blue Mary开公司(李超线段树) 题面 BZOJ 洛谷 题解 是模板题啊. #include<iostream> #include<cs ...

  10. Cassandra Demo--Python操作cassandra

    ================================================================ 创建keyspace和table CREATE KEYSPACE ex ...