您的位置：首页 > Web前端 > JavaScript

js通过Class Name获取一个对象的数组

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

/*
02
*
根据元素clsssName得到元素集合
03
*
@paramfatherId父元素的ID，默认为document
04
*
@tagName子元素的标签名
05
*
@className用空格分开的className字符串
06
*/
07
function
getElementsByClassName(fatherId,tagName,className){
08
node
=fatherId&&document.getElementById(fatherId)||document;
09
tagName
=tagName||
"*"
;
10
className
=className.split(
"
"
);
11
var
classNameLength
=className.length;
12
for
(
var
i=0,j=classNameLength;i<j;i++){
13
//创建匹配类名的正则
14
className[i]=
new
RegExp(
"(^|\\s)"
+
className[i].replace(/\-/g,
"\\-"
)
+
"(\\s|$)"
);
15
}
16
var
elements
=node.getElementsByTagName(tagName);
17
var
result
=[];
18
for
(
var
i=0,j=elements.length,k=0;i<j;i++){
//缓存length属性
19
var
element
=elements[i];
20
while
(className[k++].test(element.className)){
//优化循环
21
if
(k
===classNameLength){
22
result[result.length]
=element;
23
break
;
24
}
25
}
26
k
=0;
27
}
28
return
result;
29
}
测试

<
div
id
=
"container"
>
2
<
span
class
=
"aaa
zzzccc"
></
span
>
3
<
div
class
=
"aaa
bbbccc"
></
div
>
4
</
div
>
5
<
div
class
=
"aaa
bbbccc"
></
div
>
1
window.onload
=
function
(){
2
alert(getElementsByClassName(document,
"div"
,
"aaa
ccc"
).length);
//2
3
alert(getElementsByClassName(
"container"
,
"div"
,
"aaa
ccc"
).length);
//1
4
alert(getElementsByClassName(
"container"
,
"span"
,
"aaa
zzz"
).length);
//1
5
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航