六(2).自己动手生产一个getElementsByClass()函数

JavaScript DOM Tutorials


六.W3C DOM之旅的第一步,文档访问 .第二节.自己动手生产一个getElementsByClass()函数

3. getElementsByClass() # 通过类名查找元素

getElementsByClass()方法,内建的DOM函数中并没有提供用来实现按类名查找元素的方法,因此我们需要自己动手生产一个函数来完成这一功能。
只要把编写好的getElementsByClass()函数放在我们的js文件里或者封装到我们自己的库里,积少成多就有了像Prototype,jQuery,Mootools一样的JavaScript Library了。在我们编写任何JavaScript代码的时候,都可以将类名作为参数使用该函数查找元素组了.

完整的getElementsByClass()函数


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function $(element){ 
    if(arguments.length>1){ 
        for(var i=0,elements=[],length=arguments.length;i<length;i++){
            elements.push($(arguments[i])); 
		}	
        return elements; 
    } 
	//如果该参数是一个字符串那假设它是一个id
    if(typeof element=="string") {
        return document.getElementById(element); 
	}else{	
 
        return element; 
    }		
} 
/* 
 第一个参数CSS类名,第二个参数父对象,第三个参数标签名(eg "div"、"li") 
 其中第一个参数必选,第二个第三个参数可选 
*/ 
document.getElementsByClassName=function(className,parentElement,tagName) { 
var children = ($(parentElement)||document.body).getElementsByTagName(tagName||'*');//兼容IE5.x以上的版本和FF的判断
//var children =document.all?document.all:document.getElementsByTagName("*");//兼容IE5.x版本和FF的判断
var elements = [],child; 
for (var i=0,length=children.length;i<length;i++) { 
	child = children[i]; 
	if (hasClassName(child,className)) 
	   elements.push(child); 
	} 
	return elements; 
}; 
//判断对象element是否包含指定类className 
function hasClassName(element,className) { 
    if (!(element=$(element))) return false; 
    var elementClassName=element.className; 
    if (elementClassName.length == 0) return false; 
    if (elementClassName==className||elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)"))) 
        return true; 
    return false; 
}

测试:

相同类名的div元素

1
2
3
4
5
<div class="c">aaaaa</div>
<div class="c">bbbbb</div>
<div class="c">ccccc</div>
<div class="c">ddddd</div>
<div class="c">eeeee</div>

通过getElementsByClass()函数,查找有相同类名的div元素组。

1
2
3
4
5
6
7
8
//测试
var className=document.getElementsByClassName("c");
if(typeof className!="undefined"){
	for(var i=0;i<className.length;i++){
	   alert(className[i].innerHTML);
	}
 
}

完整的getElementsByClass()函数的第二种实现方式


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//getElementsByClass()函数的第二种实现方式
document.getElementsByClassName=function(className){
    var allArray=new Array();
	var elements=new Array();
	if(typeof document.all!="undefined"){
 
	   allArray=document.all;//返回文档中的所有元素
 
	}else{
 
	   allArray=document.getElementsByTagName("*");//返回文档中的所有元素
 
	}
	for(var i=0;i<allArray.length;i++){
	  var isClassName=hasClassName(allArray[i],className);
	  if (isClassName){
		   elements.push(allArray[i]); 
	  } 
 
    }
    return elements;
};
 
 
//判断对象element是否包含指定类className 
function hasClassName(element,className) { 
 
    var elementClassName=element.className;
    if (elementClassName.length == 0) return false; 
    if (elementClassName==className||elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)"))) 
        return true; 
    return false; 
 
}

站点统计