今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。
有时候我们会想扩展dom元素的功能，可以添加一些自定义的方法，以让它用起来更加灵活、方便；先来举个例子：
复制代码 代码如下:
dom功能扩展
你好
毫无疑问，从以上代码可以看出，当点击a标签的时候会弹出“你好”，taga是一个dom元素，除了有onclick事件以外，还有onmouseover,onmouseout,onmousemove等等，而这些事件都是dom元素本身就具有的；但现在我们希望对它进行扩展，例如可以让它支持taga.bind，我可以用taga.bind(click,function(){}),来代替taga.onclick=function(){}。ok，现在的目的很明确，先看下面的代码：
复制代码 代码如下:
dom功能扩展
你好
以上这段代码就是功能扩展后的最终效果，它与上一段代码实现的功能是一样的，但现在它还不能执行，要进行扩展后才可以，在此之前先来看一些基础知识，这很重要，因为等下会用到：
1、htmlelement，在dom标准中，每个元素都继承自htmlelement，而htmlelement又继承自element，element又继承自node；于是我们可以使用htmlelement的prototype来扩展html元素的方法和属性，如何实现？我们来看一段代码：
复制代码 代码如下:
dom功能扩展
你好
以上代码在页面加载的时候就弹出“这是一个扩展方法”，不过相信你已经注意到了，在ie6,7,8里面会出错，但在ie9以上或者chrome,firefox,opera这些浏览器里面都能正常运行，这是兼容性问题，不用担心，后面会解决。
以上的代码灵活性不够好，我们优化一下，让它更加灵活：
复制代码 代码如下:
dom功能扩展
你好
从以上代码可以看出，有了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);
    }
}
以下是事件绑定的使用例子：
复制代码 代码如下:
dom功能扩展
你好
以上代码运行后，点击“你好”就会弹出“这是事件绑定”，这里值得一提的就是addevenlistener的第三个参数，这里的值是false，意思是取消capture方式而采用冒泡方式。标准的事件有两种触发方式，一种是捕获型（caputre），另一种是冒泡型；而ie只支持冒泡型。捕获型的特点是触发方式是从外到内的方式触发事件，而冒泡型就是从内到外的方式触发事件，假设以上代码的a元素外层包了一个div元素，如果a元素与它的父元素div都有一个onclick事件，那么冒泡型就是点击a的时候会先触发a的事件，然后再触发div的事件，反之就是捕获型。
ok，相信通过以上的分析，对htmlelement扩展和事件绑定都有了相当的了解，结合这两个知识点，我们可以写出如下的代码：
复制代码 代码如下:
dom功能扩展
你好
执行以上这个页面，在ie9,chrome,opera,firefox等标准浏览器里都能正常触发taga的点击事件，于是现在只剩下一个问题，就是要兼容其他浏览器；ie浏览器之所以出错，是因为它们隐藏了对htmlelement的访问，于是针对ie浏览器，我们就不能用htmlelement.prototype来进行扩展了，但我们可以通过重写以下几个函数来达到目的：
document.getelementbyid
document.getelementsbytagname
document.createelement
document.documentelement
document.body
（ps：记忆中获取dom元素好像就是以上这些方法了～不知道还有没有其他）
重写后，再进行一些处理变换就可以得到以下完整的页面代码：
复制代码 代码如下:
dom功能扩展
你好
ok，目前为止已经解决了兼容性问题，这是所有浏览器都能顺利通过的dom元素扩展的代码，但是这样还有一个小问题，细心的人会发现在ie浏览器里面弹出的结果是undefined，而不是你好；问题的原因在于ie的事件绑定上，看以上代码，当调用alert(this.innerhtml)的时候，由于ie绑定事件用的是attachevent，这时候this指向的是windows，于是现在的目标的要改变this指向的对像，将this指向taga。于是经过修改，完整代码如下：
复制代码 代码如下:
dom功能扩展
你好