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

By Rainbow on // JavaScript // 4036 Views+ // (2) Comments

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; 
 
}
分享到： 更多

文章评论 已经有 2 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    请教一下，请问第二种方法的后面那个正则表达式匹配的是什么呢？

    回复

    Joker_Qyou

    • elementClassName.match(new RegExp("(^|\\s)"+className+"(\\s|$)")) match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 这个正则表达式的含义是首先是匹配一个字符串的开始和空白字符，然后是类名，最后是匹配一个空白字符和字符串的结束。

      Rainbow

站点统计