纯dom 选项卡js框架 -2

代码如下dom.js:

var dom = {};
//获得元素字节点
dom.getNodes = function(a,tag){
var len = arguments.length;
if (len == 0)
	{
	alert("没传参数");
	return;
	}
if(len == 2){
	var tag = tag.toUpperCase();
}


var olis = a.childNodes;
var a = [];
	for(var i=0;i<olis.length;i++){
		var t = i;
		if(len == 2){
			
			//alert(olis.item(t).tagName);
			if(olis.item(t).nodeType == 1 && olis.item(t).tagName == tag){
			a.push(olis.item(i));
			}
			}
		else if (len == 1)
			{
			if(olis.item(t).nodeType == 1 ){
				a.push(olis.item(i));
				}
			}
		
	}
	//alert(a.length);
	return a;
}
//切换选项卡
dom.changetab = function(){
	
	var nIndex = dom.getIndex(this);
	var oUl =  this.parentNode;
	var oLis = dom.getChildren(oUl,'li');
	var oDivs = dom.getChildren(oUl.parentNode,'div')
	for(var i =0;i<oLis.length;i++){
		dom.removeClass(oLis[i],'selectedLi');
		dom.removeClass(oDivs[i],'selecteDiv');
		
	}
	dom.appendClass(oLis[nIndex],'selectedLi');
	dom.appendClass(oDivs[nIndex],'selecteDiv');
}
//为dom元素添加class
dom.appendClass = function(obj,strClass){
	if(obj && obj.nodeType==1){ 
		var reg = new RegExp("\\b"+strClass+"\\b",'g');
		if(!reg.test(obj.className)){
			obj.className +=' '+ strClass;
		}
	}else{
		throw new Error("参数格式不对APPENDCLASS");
	}
	}
//为元素删除class
dom.removeClass = function(ele,strClass){//给元素删除class
	if(ele.nodeType==1 &&  (typeof strClass == 'string')){
	var reg = new RegExp('\\b'+strClass+'\\b','g');
	ele.className = ele.className.replace(reg,"");
	}else{
		throw new Error("参数格式不对REMOVECLASS");
	}
}
//侦测元素的index(用于侦测鼠标点击第几个li)
dom.getIndex = function(ele){
	var  n = 0;
	var pre = ele.previousSibling;
	while(pre){
		if(pre.nodeType==1){
			n++;
		}
		pre = pre.previousSibling;
	}
	return n;


}
//获得dom的子元素集合
dom.getChildren = function(ele,tag){
	var a = [];
	
	if(arguments.length==2){
		if (!(ele && ele.nodeType ==1)){
			throw new Error("第一个参数不对");
		}
		var childs = ele.childNodes;
		if(typeof tag!='string'){
			throw new Error('参数tag不对');
		}
		tag = tag.toUpperCase();
		for(var i=0 ,l=childs.length;i<l;i++){
			var ele = childs[i];
			if (ele.nodeType ==1 && ele.tagName == tag)
				{
				a.push(childs[i]);
				}
		
		}
	}else if(arguments.length==1){
		if (!(ele && ele.nodeType ==1)){
			throw new Error("第一个参数不对");
		}
		var childs = ele.childNodes;
		for(var i=0 ,l=childs.length;i<l;i++){
			var ele = childs[i];
			if (ele.nodeType ==1)
				{
				a.push(childs[i]);
				}
		
		}
	
	}else{
		throw new Error("参数不合法");
	}
	
	return a;
}
//用于供外界调用的借口
dom.tabBind = function(eleId){
	var oTab = document.getElementById(eleId);
	var oul = dom.getChildren(oTab,'ul')[0]
	var oLis = dom.getChildren(oul,'li')
	for(var i=0;i<oLis.length;i++){
		//lis[i].onclick = (function (m){return function (){ changetab(m)}})(i);
		oLis[i].onclick = dom.changetab;
	}


}

效果如图：