Designsor

看过之前写的那篇BLOG，应该都发现了一句挺有意思的话。对于DOM中的element我可以添加自定义事件。比如：

Element.prototype.show=function(){this.style.display=’block’;}

喔~然后调用之

var test=document.getElementById(‘test’);

test.show();

恩，虽然在最后的最后我知道了这么写是严重的污染原型链的一种及其牛逼的反面例子。但是确实我今天要说的不是这个问题。

经过测试所有的浏览器除了IE6/7（没有测试什么360，遨游，TT什么的杯具浏览器……）其他的浏览器都对外开放Element对象，允许你对齐prototype的原型链上添加或者重写方法。

但是当你遇到了IE，那么你就也遇到了 “Element is undefine”….这个错误了。

查了好久，具体的解决办法有2个，一个是在微软官方查到的用HTC的方法对Element进行扩展自定义方法，还有一种老外的方法，那么就是重写DOM方法。

显然，第2种方法在一些社区被受到推崇，号称可以解决99%的问题。而不用恶心人的HTC，而且不需要2个文件加载那么复杂。

那么到底是如何解决的呢？

首先：Element is undefine，那么我们建立一个Element就好了。

var Element=function(){};

恩 一个构造函数容器就建立了，他自身已经拥有了prototype属性了。因为是function嘛。

然后你每次给Element扩展方法的时候其实在IE6/7下都是给这个你自己定义的Element扩展的方法。那么我们如何调用这些扩展方法呢。

回想一下我们什么场合会用到事件。喔，getElementById,getElementsByTagName,createElement也就是这三种情况了。还有什么呢？原生的JS里只有这3种方法了吧？不对 只是99%，你可以.all也可以from[0]等等其他的方法获得元素，但是最基本其实就是这3个方法了。

那么我们要重写这3个DOM方法，在每次调用的时候都继承我们自己创建的Element对象下面的自定义方法。

如何去做呢？下面是完整的代码：

(function(w, undefined){
var Element=w.Element || function(){
return {
author:’longxiao’
};
};

if (!!Element().author) {
var __createElement = document.createElement;
document.createElement = function(tagName){
var element = __createElement(tagName);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}

var __getElementById = document.getElementById;
document.getElementById = function(id){
var element = __getElementById(id);
for (var key in Element.prototype)
element[key] = Element.prototype[key];
return element;
}

var __getElementsByTagName = document.getElementsByTagName;
document.getElementsByTagName = function(tagName){
var elements = __getElementsByTagName(tagName);
for (var key in Element.prototype){
for(var i=0;i<elements.length;i++){
elements[i][key]=Element.prototype[key];
}
}
return elements;
}
};

Element.prototype.getattrlength=function(){
alert(this.attributes.length)
};

document.getElementById(‘page’).getattrlength();

})(window);

更多关于原型链的问题在我自己研究明白了之后再来分享……