getElementsByClassName:
根据className获取元素集合，一般原理为：遍历页面中的元素(可指定范围)-->筛选有className的元素(有className并且不为空，以缩小检索范围)-->收集符合条件的元素(元素的className为指定的className或者是否包含指定的className)存入数组-->返回数组(即得到的结果).
其中有几个需要注意的地方:
1.用到for循环，所以在操作DOM时能写在循环外面的尽量写到外面，比如
for(var i=0,len=100;i
写成
var classname=ele.className;
for(var i=0,len=100;i
有没有发现好很多？
2.其中有用到Array.prototype.indexOf,但是这个IE9以下IE内核的浏览器是不支持这个方法的，所以需要判断下，我们就采用这个经典的方法: !-[1,]
if(!-[1,]){
//<=ie8
}else{
//other
}
3.在分解元素的className时(因为有多className的情况)用到了正则,匹配除空格、tab键和换行符之外的其他字符，match方法返回一个数组，这个数组是匹配到的结果;
好了，下面上getElementsByClassName的完整代码：
function getElementsByClassName(classname,obj){
var arr=[];
var eles=(obj?obj:document).getElementsByTagName("*");
for(var i=0,len=eles.length;i
var ele=eles[i];
var classnames=ele.className;
if(classnames!=""&&classnames.replace(/s+/g," ")!=" "){//如果该元素有classname并且不为空
var names=classnames.match(/[^s]+/g);//将其classname保存在一个数组
if(!-[1,]){//<=ie8
for(var j=0,len2=names.length;j
if(names[j]==classname){
arr.push(ele);
}
}
}else{
if(names.indexOf(classname)!=-1){//ie9 other
arr.push(ele);
}
}
}
}
return arr;
}
removeClassName:
和上面的方法异曲同工:-)，就不再作详细说明
function removeClassName(classname,obj){
var classnames=obj.className;
if(classnames&&classnames.replace(/s+/g," ")!=" "){//存在
var names=classnames.match(/[^s]+/g);//转数组
var arrs=[];
for(var i=0,len=names.length;i
if(names[i]!=classname){
arrs.push(names[i]);
}
}
obj.className=arrs.join(" ");
}
}
Comments(0)