IE中实现HTMLElement

【 tulaoshi.com - Web开发 】

　　在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;ithis.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;ithis.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。