Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

DOM4的元素监控接口MutationObserver

  IE的onpropertychange事件非常好用,但是它毕竟是IE私有的东西,而且实现上有点蛋疼。那么现代浏览器上有什么呢?其实DOM4中提供了对DOM元素监控的接口MutationObserver,虽然和IE的onpropertychange并不是一回事,但是它们有着异曲同工之妙~
  说到DOM4,听起来是挺可怕的。DOM3目前还不能普及,DOM4能兼容上?这个嘛。。至于其它浏览器兼不兼容,至少Chrome和Firefox是兼容了= =。
  这个接口通过使用一个回调函数作为MutationObserver基类的构造函数来构造出一个用于监视DOM的对象。这个对象的observe方法可以指定它监控的目标DOM对象。这个方法的第二个参数是需要监控的数据类型,这个东西我就不说了,直接到MDN上能找到那个表格。其实使用方法也没啥好介绍的,反正接口文档很详细。我就拿出个例子,顺便说说这玩意儿使用的注意事项。 //创建MutationObserver的实例,传入一个回调函数
var mo=new MutationObserver(function(e){
  //监视结果是一个数组,需要做遍历
  for(var n,i=0;i<e.length;i++){
    //把监视到的记录输出到控制台
    console.log(e[i]);
  };
});
//文档加载完毕之后
onload=function(){
  //开始监视document.body
  //监视的内容是所有属性
  mo.observe(document.body,{attributes:true});
};

  这个例子只是做了对BODY的属性监控,当BODY的属性改变时就会触发构造MutatiionObserver对象时传入作为构造参数的的回调函数。真正让这个对象监控BODY是在文档加载完成后指派的,这个在代码中的注释有说明。测试的时候,我在控制台中直接键入“document.body.bgColor="red";”,于是这个监控的回调函数就被触发了。
  没有发现什么问题吗?我对元素监控的是属性(Attribute),但是我在控制台中输入的代码是修改元素的属性(Property)。它为什么会触发呢?这就涉及到“Property”与“Attribute”概念的区分。对于DOM元素内置属性,通常在内部已经实现了“Property”与“Attribute”的某种关联。像bgColor这样的内置属性,修改“Property”时“Attribute”也会跟着改变,这是这个属性的内置特性(Feature)。对于某些内置属性,他们并没有bgColor这样的特性,甚至有些特性还存在兼容性问题。不过不要紧,有兼容性问题的都是低版本浏览器,连DOM4的MutationObserver都能兼容的浏览器一般不会有兼容性问题。
  第一次见到这个接口我就企图用它来监控控件的输入结果,但是遇到了上面的问题。INPUT的value属性并不是双映射的(见:元素属性操作的浏览器差异),用户的操作并不会改变控件元素的属性(Attribute),所以无法通过MutationObserver来监控。至于observe方法的其它监控类型就没有这么多问题了。

  参考:
    MDN MutationObserver
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^