classLIST元素增删改查方法

window.onload=function () {
var oDiv=document.getElementsByTagName(‘div‘)[0];
var oInP=document.getElementsByTagName(‘input‘)[0];
var aDiv=new classList(oDiv);
oInP.onclick=function(){
aDiv.add(‘ha‘);
alert(oDiv.className);
}
}
/*
如果e有classList属性则返回它，否则，返回一个为e模拟DOMTOkenList API的对象
返回的对象有contains(),add(),remove(),toggle()和toString()等方法
来检测和修改元素e的类集合，如果classList属性是原生支持的。
返回的类数组对象有length和数组索引属性。模拟DOMTokenList不是类数组对象
但是它有一个toArray()方法来返回一个含元素类名的纯数组快照
*/
function classList(e){
//如果e.classList存在，则返回它
if (e.classList) {return e.classList;}
//否则，就伪造一个
else return new CSSClassList(e);
}
//CSSClassList是一个模拟DOMTOkenList的javascript类
function CSSClassList(e){this.e=e;}
//如果e.className包含类名c则返回true,否则返回false
CSSClassList.prototype.contains=function(){
//检查c是否合格类名，=-1代表找不到
if(c.length==0||c.indexOf(" ")!=-1)
throw new Error("Invalid calss name:"+c+"‘");
var classes=this.e.className;
if(!classes) return false;
//e不含类名
if(classes===c)return true;
//e有一个完全匹配的类名
return classes.search("\\b"+ c +"\\b")!=-1;
};
//如果c不存在，将c添加到e.className中
CSSClassList.prototype.add=function(c){
if(this.contains(c)) return;
var classes=this.e.className;
if(classes&&classes[classes.length-1]!=" ")
c=" "+c;
this.e.className+= c;
};
//将在e.className中出现的所有的c删除掉
CSSClassList.prototype.remove=function(c){
if(c.length==0||c.indexOf(" ")!=-1)
throw new Error("Invalid calss name:"+c+"‘");
var pattern=new RegExp("\\b"+ c +"\\b\s*","g");
this.e.className=this.e.className.replace(pattern,"");
};
//如果c不存在，将c添加到className中，并返回true；
//否则，将在e.className中出现的所有c都删除，并返回fasle
CSSClassList.prototype.toggle=function(c){
if(this.contains(c)){this.remove(c);return false;}
else{this.add(c);return true;}
};
//返回e.className本身
CSSClassList.prototype.toString=function(){
return this.e.className;
}
//返回在e.className中的类名
CSSClassList.prototype.toArray=function()
{return this.e.className.match(/\b\w+\b/g)||[];};