Firefox 浏览器的DOM原型扩展

    我不想挑起IE与Firefox之间的争论,我只想说说Firefox浏览器有而IE里没有的一个功能,对DOM里的对象原型的扩展。

    在DOM里的window、document、element、event等这些对象在Firefox(或者说Mozilla核心的浏览器)里都有与之对应的原型:Window、HTMLDocument、HTMLElement、Event等,对于这些原型扩展之后,那些window、document等对象就“自动”拥有某些成员属性或者成员方法了。举个简单的例子,比如在IE里都有一个 outerHTML 属性,可以取得这些元素所有的细节信息,但是这个属性不是W3C标准属性,所以那些非IE的浏览器就不会拥有这种属性了。不过因为这个属性使用起来非常方便,我想在Firefox之类的浏览器里也使用这个属性那该怎么办呢?这里就要用到原型扩展了:

<script type="text/javascript">/*<![CDATA[*/
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
  HTMLElement.prototype.__defineGetter__("outerHTML",function()
  {
    var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
    if(a[i].specified) str+=" "+a[i].name+'="'+a[i].value+'"';
    if(!this.canHaveChildren) return str+" />";
    return str+">"+this.innerHTML+"</"+this.tagName+">";
  });
  HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
  {
    var r = this.ownerDocument.createRange();
    r.setStartBefore(this);
    var df = r.createContextualFragment(s);
    this.parentNode.replaceChild(df, this);
    return s;
  });
  HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
  {
    return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
  });
}
/*]]>*/</script>

    加了这么一段代码之后,在Firefox浏览器里再调用 document.getElementById("divId").outerHTML,(读取/赋值)一切正常,这一点优势是IE系列浏览器所不具有的。这一点算是 Firefox 浏览器(Mozilla核心的浏览器)的一个亮点吧!

    下面再写两个比较有用的扩展吧:
<script type="text/javascript">/*<![CDATA[*/
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
  Window.prototype.detachEvent = HTMLDocument.prototype.detachEvent=
  HTMLElement.prototype.detachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.removeEventListener(en.toLowerCase().substr(2), func, cb);
  };
}
if(typeof Event!="undefined" && !window.opera)
{
  var t=Event.prototype;
  t.__defineSetter__("returnValue", function(b){if(!b)this.preventDefault();  return b;});
  t.__defineSetter__("cancelBubble",function(b){if(b) this.stopPropagation(); return b;});
  t.__defineGetter__("offsetX", function(){return this.layerX;});
  t.__defineGetter__("offsetY", function(){return this.layerY;});
  t.__defineGetter__("srcElement", function(){var n=this.target; while (n.nodeType!=1)n=n.parentNode;return n;});
}
/*]]>*/</script>

以上的代码都是截取于我写的 jsframewrok 框架。 

DOM Inspector是Mozilla Firefox的一个扩充套件,官方中文版上称之为DOM观察器,在安装Mozilla Firefox时,可以在自订安装中选择是否安装DOM Inspector,如果在安装Mozilla Firefox时没有选择自订安装以安装DOM Inspector,则可以在 MozillaDOM Inspector 网址进行安装。 Ajax应用程式中经常操作DOM Tree,您可以直接使用DOM Inspector来观察DOM Tree中对应於网页画面的哪个元件,执行Mozilla Firefox官方中文版的「工具/DOM观察器」,可以显示DOM Inspector视窗,在网址列输入网址,并按下「观察」按钮,即可开始观察DOM与网页的对应,对应的画面会以红色方框闪烁显示。 如果您想要找寻特定的DOM节点,则可以执行「搜寻/寻找节点」,搜寻的方式可以有依「Id」、「Tag」或「Attr」等来进行搜寻。 在找到想观察的节点后,可以在左边的窗格观察到该节点的各种属性,预设是显示JavaScript物件的各种属性,例如可在下图中,观察到onmouseover与onmouseoout的事件处理者分别是getBookData()与clearData(): 例如可以切换至DOM Node的检视模式,您也可以在某个属性上按右键「编辑」,直接改变某个DOM的属性值,像是改变src属性: 您甚至可以选定一个DOM节点,在JavaScript检视中,按右键「执行JavaScript」… 您还可以在 Introduction to the DOM Inspector 找到一些关於DOM Inspector的介绍。 安装方式:使用直接把该文件拖动到fifefox上或使用firefox-文件-打开-选择下载的文件-确定。。。即可
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值