IE中实现HTMLElement


本文示例源代码或素材下载

  在DOM标准中,每个HTML元素都是继承自HTMLElement。比如有如下代码:

window.onload=function(){
  alert(document.bodyinstanceofHTMLElement);
}

  会弹出true,表明了HTML的元素是HTMLElement的实例

  实际上HTMLElement继承自Element,Element继承自Node,如图:

  知道了HTMLElement这个类,就可以很方便的用Prototype来扩展每个HTML元素的方法或者属性。

  但是在IE中将这个类隐藏了,不能通过代码访问。为了达到同样的目的,可以通过如下代码来进行修复:

varDOMElement={
  extend:function(name,fn){//添加名称为name的方法fn
  
    if(!document.all)//除了ie而外的浏览器都能够访问到HTMLElement这个类
      eval("HTMLElement.prototype."+name+"=fn");
    else{
      //  IE中不能访问HTMLElement这个类
      //  为了达到同样的目的,必须重写下面几个函数
      //  document.createElement
      //  document.getElementById
      //  document.getElementsByTagName
      //  这几个函数都是获得HTML元素的方法
      //  修改这些方法,使得通过这些方法获得的每个元素拥有名称为name的方法fn
      var_createElement=document.createElement;
      document.createElement=function(tag){
        var_elem=_createElement(tag);
        eval("_elem."+name+"=fn");//_elem[name]=fn;也可以达到同样的目的
        return_elem;
      }
      var_getElementById=document.getElementById;
      document.getElementById=function(id){
        var_elem=_getElementById(id);
        eval("_elem."+name+"=fn");
        return_elem;
      }
      var_getElementsByTagName=document.getElementsByTagName;
      document.getElementsByTagName=function(tag){
        var_arr=_getElementsByTagName(tag);
        for(var_elem=0;_elem<_arr.length;_elem++)
          eval("_arr[_elem]."+name+"=fn");
        return_arr;
      }
    }
  }
};

 //测试方法

DOMElement.extend("contents",function(){returnthis.innerHTML});

  在实际使用中,我个人最烦的事情就是在用childNodes的时候,FF下会有#text节点,让人感觉很麻烦,每次都需要手动来过滤一次,通过上面介绍的方法来扩展HTMLElement可以很简单的写出一个公用的方法,以后使用就很方便了:

DOMElement.extend("getSafeChildNodes",
function(){
  vartempNodes=[];
  for(vari=0;i<this.childNodes.length;i++){
    if(this.childNodes[i].nodeName=='#text')
      continue;
    tempNodes.push(this.childNodes[i]);
  }
  returntempNodes;
});

  另外,HTML元素的getElementsByTagName(sTagName)会把这个元素之下所有tagName为sTagName的节点返回,无论是否是直接的子节点。但是在有些时候我们需要此节点直接的子节点并且满足tagName为sTagName,所以就扩展了一个方法getChildNodesByTagName:

DOMElement.extend("getChildNodesByTagName",
function(tagName){
  vartempNodes=[];
  for(vari=0;i<this.childNodes.length;i++){
    if(this.childNodes[i].nodeName.toLowerCase()==tagName){
      tempNodes.push(this.childNodes[i]);
    }
  }
  returntempNodes;
});

  测试这几个方法,有如下HTML代码:

<body>
  <divid="div1">div1</div>
  <divid="div2">
    <divid="div3">
      <divid="div4"></div>
    </div>
    <divid="div5"></div>
    <divid="div6"></div>
  </div>
</body>


  通过如下Javascript代码测试:

onload=function(){
  alert(document.getElementById("div1").contents());
  alert(document.getElementById("div2").getChildNodesByTagName("div").length);
  alert(document.getElementById("div2").getElementsByTagName("div").length);
  alert(document.getElementById("div2").getSafeChildNodes().length);
  alert(document.getElementById("div2").childNodes.length);
}

  第一个方法会相当于innerHTML属性,返回的值为“div1”;

  第二个方法会获得子节点中tagName为div的节点的长度,返回值为3(不包括div4);

  第三个方法是返回子节点(包括间接的子节点)中tagName为div的节点的长度,返回值为4(包括div4);

  第四个方法是返回子节点,在ff中过滤掉“#text”节点,在各种浏览器中都返回3;

  第五种方法是js自带的子节点属性,在ff中返回7,在ie中返回3



相关阅读:
asp.net Javascript 的几种写法与提示
正则表达式之全部符号对照表
ASP性能优化28条守则---[7] 将代码封装在 COM 对象中
javascript新手语法小结
多文件上传的例子
Ubuntu Linux系统设定服务自行开机启动
MySQL数据库敏感数据安全保护六大措施
asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)
广告代码静态化js通用函数
不可小看的改变 Vista系统五大便利操作
C#3.0中实现隐式类型变量、匿名类型的方法
linux系统下c语言编程入门--线程操作
PHP正则表达式的效率 回溯与固化分组
asp.net下GDI+的一些常用应用(水印,文字,圆角处理)技巧
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4