【js：class属性】——自定义function：getElementsByClassName

OM 提供了一个名为 getElementById() 的方法，这个方法将返回一个对象，这个对象就是参数 id 所对应的元素节点。另外，getElementByTagName() 方法会返回一个对象的数组，每一个对象分别对应着文档里有给定标签的一个元素。这个方法的参数是 html 标签的名字。现在我们考虑一个问题，能不能通过标签的类名class name来获取该对象呢？下面是这个猜想的程序实现（支持多个class查询和在某个范围内进行查询）：

<span style="font-family:Verdana,宋体;color:#121c46;line-height:18px; text-indent:24px">/*
 
	 * 根据元素clsssName得到元素集合 
	 * @param fatherId 父元素的ID，默认为document 
	 * @tagName 
 	 * @className 用空格分开的className字符串
 
	 */ 
	function getElementsByClassName(fatherId,tagName,className){ 
	    node = fatherId&&document.getElementById(fatherId) || document; 
	    tagName = tagName || "*"; 
	    className = className.split(" "); 
	    var classNameLength = className.length; 
	    for(var i=0,j=classNameLength;i<j;i++){ 
	        //创建匹配类名的正则 
	        className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)");
	    }
	    var elements = node.getElementsByTagName(tagName);
	    var result = [];
	    for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性
	        var element = elements[i];
	        while(className[k++].test(element.className)){//优化循环
	            if(k === classNameLength){
	                result[result.length] = element;
	                break;
	            }  
	        }
	        k = 0;
	    }
	    return result;
	}
</span>

测试

<span style="font-family:Verdana,宋体;color:#121c46;line-height:18px; text-indent:24px"><div id="container">
   <span class="aaa zzz ccc"></span>
   <div class="aaa bbb ccc"></div>
</div>
<div class="aaa bbb ccc"></div>
window.onload = function(){
   alert(getElementsByClassName(document,"div","aaa ccc").length);//2
   alert(getElementsByClassName("container","div","aaa ccc").length);//1
   alert(getElementsByClassName("container","span","aaa zzz").length);//1
}</span>

eg：

getElementsByClassName("dd","a","curr")[0].className = "";
获取 className是  的对象，将其设置为“空字符串”；
这个是在做选中时显示高亮功能时用到的。