让IE也支持HTMLElement

admin@striblog.com(Stri) — Wes, 09 Dec 2009 00:43:56 +0800

今天看<精通JavaScritp>PDF电子书DOM的一章,其中讲了很多查找结点,操作结点的方法,刚开始是几个查找结点的方法,前一个结点,后一个结点,第一个子结点,最后一个子结点.父级结点;分别是

//前一个结点
function prev(elem){
do{
elem=elem.previousSibling;
}while(elem && elem.nodeType!=1);
return elem;
}
//后一个结点
function next(elem){
do{
elem=elem.nextSibling;
}while(elem && elem.nodeType!=1);
return elem;
}
//第一个子结点
function first(elem){
do{
elem=elem.firstChild;
}while(elem && elem.nodeType!=1);
return elem;
}
//父级元素结点
function parent(elem,num){
num=num || 1;
for(var i=0;iif(elem!=null)
elem=elem.parentNode;
return elem;
}
}

例子

不过这样的代码并不优美.
在FF和Opera中存在一个强大的对象原型叫做HTMLElement,它允许你为每一个HTMLDOM元素绑定函数和数据.

不过IE并不支持它.所以自己得创造;
设置一个dom的方法

copycode:

var domMethod = {
    //设置扩展dom的方法
    extendDom: function(name,fn){ 

        if(!document.all){   //除了ie而外的浏览器都能够访问到HTMLElement这个类
			HTMLElement.prototype[name] = fn;
        }else{
            var _createElement = document.createElement;
            document.createElement = function(tag){
                var elem = _createElement(tag);
				elem[name] = fn;
                return elem;
            }
            var _getElementById = document.getElementById;
            document.getElementById = function(id){
                var elem = _getElementById(id);
				elem[name] = fn;
                return elem;
            }
            var _getElementsByTagName = document.getElementsByTagName;
            document.getElementsByTagName = function(tag){
                var arr = _getElementsByTagName(tag);
                for(var i=0;i){
					arr[i][name] = fn;
                }
                return arr;
            }
        }
    }
}

例子说话

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div></div>
<span></span>
<script type="text/javascript">
var domMethod = {
    //设置扩展dom的方法
    extendDom: function(name,fn){

if(!document.all){   //除了ie而外的浏览器都能够访问到HTMLElement这个类
			HTMLElement.prototype[name] = fn;
        }else{
            var _createElement = document.createElement;
            document.createElement = function(tag){
                var elem = _createElement(tag);
				elem[name] = fn;
                return elem;
            }
            var _getElementById = document.getElementById;
            document.getElementById = function(id){
                var elem = _getElementById(id);
				elem[name] = fn;
                return elem;
            }
            var _getElementsByTagName = document.getElementsByTagName;
            document.getElementsByTagName = function(tag){
                var arr = _getElementsByTagName(tag);
                for(var i=0;i<arr.length;i++){
					arr[i][name] = fn;
                }
                return arr;
            }
        }
    }
}
domMethod.extendDom('next',function(){
									var elem=this;
	do{
		elem=elem.nextSibling;
		}while(elem && elem.nodeType!=1);
		return elem;});
        	alert(document.getElementsByTagName('div')[0].next().nodeName);</script>
</body>
</html>

Stri's Blog

让IE也支持HTMLElement