JS——封装一个可以连缀的DOM库

function $(){
	return new Base();    //每次要调用new一个新对象否则回造成叠加
}
function Base(){
	this.elements=[];    //因为要返回new对象所以创建一个数组保存获取的DOM对象
	this.getId=function(id){
		this.elements.push(document.getElementById(id));
		return this;
	};
	this.getTagName=function(tagName){
		var tags = document.getElementsByTagName(tagName);
		for(var i = 0;i < tags.length;i++){    //getElementsByTagName获取的是数组要所以要遍历元素
			this.elements.push(tags[i]);
		};
		return this;
	};
	
	this.getClass=function(className,n){
		if(arguments.length==1){   //判断参数，如果1个参数是要获取所有Class
			var all = document.getElementsByTagName("*");
			for(var i = 0;i<all.length;i++){
				if (all[i].className==className){
					this.elements.push(all[i]);
				}
			}			
		}else if(arguments.length==2){   //两个参数是想获取第n个class
			this.elements.push(document.getElementsByClassName(className)[n]);			
		}		
		return this;
	};
}
Base.prototype.addClass=function(className){     //添加class
	for(var i = 0;i < this.elements.length;i++){
		this.elements[i].className += " " + className;
	}
	return this;
}

Base.prototype.css=function (attr,value){
	for(var i = 0;i < this.elements.length;i++){
		if(arguments.length==1){   //1个参数是要的到属性值
			if(typeof window.getComputedStyle != "undefined"){  //判断浏览器是否支持getComputedStyle
				return window.getComputedStyle(this.elements[i],null).getPropertyValue(attr);
			}else if(typeof this.element[i].currentStyle != "undefined"){ //判断是否支持currentStyle
				return this.element[i].currentStyle.getAttribute(attr);
			}
		}
		this.elements[i].style[attr]=value;     //如果不是1个参数设置属性并返回对象
	};
	return this;
}
Base.prototype.html=function (value){     //innerHTML方法
	for(var i = 0;i < this.elements.length;i++){
		if(arguments.length==0){  //如果没传参数表示要获取innerHTML
			return this.elements[i].innerHTML;
		}
		this.elements[i].innerHTML=value;   //有参数是要设置innerHTML
	};
	return this;
}
Base.prototype.click=function(fn){  //添加click方法
	for (var i = 0;i < this.elements.length;i++){
			this.elements[i].οnclick=fn
	};
	return this;
}

这样就封装好了 一个 DOM相关方法；

每次这样调用：

$().getClass("box",1).css("backgroundColor","#ccc").innerHTML("直接获取了class名为box的第2个元素对象并设置了background-color为#ccc并设置标签内容为这段文字")

直接获取了class名为box的第2个元素对象并设置了background-color为#ccc并设置标签内容为这段文字，这样将很多DOM方法封装后 十分简便