神刀安全网

强大的DOM变化观察者MutationObserver

在这之前 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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 强大的DOM变化观察者MutationObserver

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮