在这之前 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. 在IIS下部署Thinkphp项目,验证码不能显示的解决办法

    由于公司租用的是虚拟空间,而且用的是IIS服务器,所以部署PHP的时候就出现很多问题:比如昨天就碰到这个问题:在IIS下部署Thinkphp项目,验证码不能显示 这是生成验证码的方法: // 制作专门 ...

  2. 百度编辑器ueditor插入表格没有边框,没有颜色的解决方法 2015-01-06 09:24 98人阅读 评论(0) 收藏

    百度富文本编辑器..很强大.. - - ,不过有些BUG..真的很无解.. 最近用这个,发现上传的表格全部没有表框.. 解决办法如下: 转载的.. 百度编辑器ueditor插入一个表格后,在编辑过程中 ...

  3. Django admin 权威指南(一)

    版本: Django 1.10 此部分由官方文档<6.5.1 The Django admin site>翻译而来. 6.5.1.1 概览 默认情况下,使用startproject的时候, ...

  4. 20 个看起来很棒的 Web UI 工具包

    程序员们比设计师更需要这些 UI 方面的内容: 1. Mini Reminders Mini Reminders 2. Transluscent UI elements Transluscent UI ...

  5. react入门(4)

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  6. redux+flux(一:入门篇)

    React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...

  7. 做一个会使用PS的前端开发

    做前端开发的需不需要PS 记得在之前的老东家做某一个系统开发,当时正在做界面开发,发现界面还需要添加几个图标,于是把这个需求反馈给了项目经理.过了十几分钟,项目经理跑过来告诉我:产品部的UI设计人员( ...

  8. 1.什么是Code First(EF Code First 系列)

    EF4.1中开始支持Code First .这种方式在领域设计模式中非常有用.使用Code First模式,你可以专注于领域设计,根据需要,为你一个领域的对象创建类集合,而不是首先来设计数据库,然后来 ...

  9. 【转】单例模式(Singleton)

    首先来明确一个问题,那就是在某些情况下,有些对象,我们只需要一个就可以了, 比如,一台计算机上可以连好几个打印机,但是这个计算机上的打印程序只能有一个, 这里就可以通过单例模式来避免两个打印作业同时输 ...

  10. ASP.NET Core开发-如何配置Kestrel 网址Urls

    ASP.NET Core中如何配置Kestrel Urls呢,大家可能都知道使用UseUrls() 方法来配置. 今天给介绍全面的ASP.NET Core 配置 Urls,使用多种方式配置Urls. ...