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

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

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

getElementsByClass()方法，内建的DOM函数中并没有提供用来实现按类名查找元素的方法，因此我们需要自己动手生产一个函数来完成这一功能。
只要把编写好的getElementsByClass()函数放在我们的js文件里或者封装到我们自己的库里，积少成多就有了像Prototype，jQuery，Mootools一样的JavaScriptLibrary了。在我们编写任何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; 
 
}