兼容所有浏览器的DOM扩展功能-浏览器扩展功能在哪

技术文章写得少，所以有时候想写点什么却下不了手，不知道该写什么；往往到了准备要写的时候才发现自己想写的东西其实很无聊，甚至觉得很幼稚，于是又关掉了编缉器，呵呵。

今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。

有时候我们会想扩展DOM元素的功能，可以添加一些自定义的方法，以让它用起来更加灵活、方便；先来举个例子：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        var tagA=document.getElementById("tagA");  
        tagA.onclick=function(){  
            alert(this.innerHTML);  
        }  
    //--> 
    </script> 
 </body> 
</html>

毫无疑问，从以上代码可以看出，当点击A标签的时候会弹出“你好”，tagA是一个DOM元素，除了有onclick事件以外，还有onmouseover,onmouseout,onmousemove等等，而这些事件都是DOM元素本身就具有的；但现在我们希望对它进行扩展，例如可以让它支持tagA.bind，我可以用tagA.bind("click",function(){}),来代替tagA.onclick=function(){}。OK，现在的目的很明确，先看下面的代码：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        var tagA=document.getElementById("tagA");  
        tagA.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    //--> 
    </script> 
 </body> 
</html>

以上这段代码就是功能扩展后的最终效果，它与上一段代码实现的功能是一样的，但现在它还不能执行，要进行扩展后才可以，在此之前先来看一些基础知识，这很重要，因为等下会用到：

　　1、HTMLElement，在DOM标准中，每个元素都继承自HTMLElement，而HTMLElement又继承自Element，Element又继承自Node；于是我们可以使用HTMLElement的Prototype来扩展HTML元素的方法和属性，如何实现？我们来看一段代码：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
    HTMLElement.prototype.Alert=function(){  
        alert("这是一个扩展方法");  
    }  
    var tagA=document.getElementById("tagA");  
    tagA.Alert();  
    //--> 
    </script> 
 </body> 
</html>

以上代码在页面加载的时候就弹出“这是一个扩展方法”，不过相信你已经注意到了，在IE6,7,8里面会出错，但在IE9以上或者Chrome,Firefox,Opera这些浏览器里面都能正常运行，这是兼容性问题，不用担心，后面会解决。

以上的代码灵活性不够好，我们优化一下，让它更加灵活：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function DOMExtend(name,fn){  
            eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展  
        }  
        function Alert(){  
            alert("这是一个扩展方法");  
        }  
        DOMExtend("Alert",Alert);  
 
        var tagA=document.getElementById("tagA");  
        tagA.Alert();  
    //--> 
    </script> 
 </body> 
</html>

从以上代码可以看出，有了DOMExtend这个方法以后，我们就可以通过传入不用的name 和 fn 实现不同的扩展。

2、以上讲完了HTMLElement，接下来讲讲事件的绑定，很多人都知道，IE和其他浏览器的事件绑定方式不一样，实现兼容所有浏览器的事件绑定的代码如下：

function BindEvent(elem,event,fun){  
    if(elem.addEventListener){  
        elem.addEventListener(event,fun,false);  
    }  
    else{  
        elem.attachEvent("on"+event,fun);  
    }  
}

以下是事件绑定的使用例子：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function BindEvent(elem,event,fun){  
            if(elem.addEventListener){  
                elem.addEventListener(event,fun,false);  
            }  
            else{  
                elem.attachEvent("on"+event,fun);  
            }  
        }  
        var tagA=document.getElementById("tagA");  
        function Alert(){  
            alert("这是事件绑定");  
        }  
        BindEvent(tagA,"click",Alert);  
    //--> 
    </script> 
 </body> 
</html>

以上代码运行后，点击“你好”就会弹出“这是事件绑定”，这里值得一提的就是addEvenListener的第三个参数，这里的值是false，意思是取消Capture方式而采用冒泡方式。标准的事件有两种触发方式，一种是捕获型（caputre），另一种是冒泡型；而IE只支持冒泡型。捕获型的特点是触发方式是从外到内的方式触发事件，而冒泡型就是从内到外的方式触发事件，假设以上代码的A元素外层包了一个DIV元素，如果A元素与它的父元素DIV都有一个onclick事件，那么冒泡型就是点击A的时候会先触发A的事件，然后再触发DIV的事件，反之就是捕获型。

OK，相信通过以上的分析，对HTMLElement扩展和事件绑定都有了相当的了解，结合这两个知识点，我们可以写出如下的代码：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function DOMExtend(name,fn){  
            eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){//执行完DOMExtend后，这里的this会指向HTMLElement  
                this.addEventListener(event,fun,false);//标准的事件绑定  
            }  
            else{  
                this.attachEvent("on"+event,fun);//IE的事件绑定  
            }  
        }  
 
        DOMExtend("bind",BindEvent);//执行功能扩展  
 
        var tagA=document.getElementById("tagA");  
          
        tagA.bind("click",function(){//这就是我们最终要实现的功能  
            alert(this.innerHTML);  
        })  
 
    //--> 
    </script> 
 </body> 
</html>

执行以上这个页面，在IE9,Chrome,Opera,Firefox等标准浏览器里都能正常触发tagA的点击事件，于是现在只剩下一个问题，就是要兼容其他浏览器；IE浏览器之所以出错，是因为它们隐藏了对HTMLElement的访问，于是针对IE浏览器，我们就不能用HTMLElement.prototype来进行扩展了，但我们可以通过重写以下几个函数来达到目的：

document.getElementById

document.getElementsByTagName

document.createElement

document.documentElement

document.body

（PS：记忆中获取DOM元素好像就是以上这些方法了～不知道还有没有其他）

重写后，再进行一些处理变换就可以得到以下完整的页面代码：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
        function DOMExtend(name, fn){  
            if(typeof(HTMLElement)!="undefined"){  
                eval("HTMLElement.prototype."+name+"="+fn);  
            }  
            else{  
                var _getElementById=document.getElementById;  
                document.getElementById=function(id){  
                    var _elem=_getElementById(id);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _getElementByTagName=document.getElementsByTagName;  
                document.getElementsByTagName=function(tag){  
                    var _elem=_getElementByTagName(tag);  
                    var len=_elem.length;  
                    for(var i=0;i<len;i++){  
                        eval("_elem["+i+"]."+name+"="+fn);  
                    }  
                    return _elem;  
                }  
 
                var _createElement=document.createElement;  
                document.createElement=function(tag){  
                    var _elem=_createElement(tag);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _documentElement=document.documentElement;  
                eval("_documentElement."+name+"="+fn);  
 
                var _documentBody=document.body;  
                eval("_documentBody."+name+"="+fn);  
            }  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){  
                this.addEventListener(event,fun,false);  
            }  
            else{  
                this.attachEvent("on"+event,fun);  
            }  
        }  
 
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
 
        wrap.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    </script> 
 </body> 
</html>

OK，目前为止已经解决了兼容性问题，这是所有浏览器都能顺利通过的DOM元素扩展的代码，但是这样还有一个小问题，细心的人会发现在IE浏览器里面弹出的结果是"undefined"，而不是"你好"；问题的原因在于IE的事件绑定上，看以上代码，当调用alert(this.innerHTML)的时候，由于IE绑定事件用的是attachEvent，这时候this指向的是windows，于是现在的目标的要改变this指向的对像，将this指向tagA。于是经过修改，完整代码如下：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能扩展</title> 
 </head> 
 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
        function DOMExtend(name, fn){  
            if(typeof(HTMLElement)!="undefined"){  
                eval("HTMLElement.prototype."+name+"="+fn);  
            }  
            else{  
                var _getElementById=document.getElementById;  
                document.getElementById=function(id){  
                    var _elem=_getElementById(id);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _getElementByTagName=document.getElementsByTagName;  
                document.getElementsByTagName=function(tag){  
                    var _elem=_getElementByTagName(tag);  
                    var len=_elem.length;  
                    for(var i=0;i<len;i++){  
                        eval("_elem["+i+"]."+name+"="+fn);  
                    }  
                    return _elem;  
                }  
 
                var _createElement=document.createElement;  
                document.createElement=function(tag){  
                    var _elem=_createElement(tag);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _documentElement=document.documentElement;  
                eval("_documentElement."+name+"="+fn);  
 
                var _documentBody=document.body;  
                eval("_documentBody."+name+"="+fn);  
            }  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){  
                this.addEventListener(event,fun,false);  
            }  
            else{  
                var tag=this;  
                tag.attachEvent("on"+event,function(){  
                    fun.apply(tag,arguments);//这里是关键  
                });  
            }  
        }  
 
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
 
        wrap.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    </script> 
 </body> 
</html>

原文链接：http://www.cnblogs.com/xueming/archive/2012/07/30/2615077.html