你的位置:首页 > Java教程

[Java教程]getElementsByClassName()用法详解


getElementsByClassName()用法详解:

在编程中,我们习惯于使用以下方式获取对象:

getElementById('id')getElementsByName('name')getElementsByTagName('tag')

第一个可以获取指定id值的对象,第二个可以获取具有指定name属性值的对象集合,第三个则是获取指定标签名称的对象集合。这三种方式在编写代码中非常的常用,当然也非常的便利,这个时候可能很多朋友就有这样的以为,class属性作为标签的常用属性,有没有一个方法能够通过制定的class属性值获取对象,其实这样的方法并非没有:

getElementsByTagName("class")

此方法实现了我们想要的功能,它可以获取具有指定class属性值的对象集合,但是令人遗憾的是具有浏览器兼容问题。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>getElementsByClassName()用法详解-蚂蚁部落</title><script type="text/javascript">window.onload=function(){ document.getElementsByClassName("mytest")[0].style.color="#F00";}</script></head> <body> <div >大家好</div></body></html>

以上代码可以在谷歌、火狐和IE8以上的浏览器中完美运行,但是IE8和IE8以下的浏览器不支持此函数。虽然在将来低版本的IE浏览器退出市场之后,此函数肯定会意气风发,当前来说还是最好不要直接使用此函数,不过我们可以模拟实现此函数。

代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>getElementsByClassName()用法详解-蚂蚁部落</title><script type="text/javascript">var getElementsByClass=function(searchClass,node,tag){ var classElements=new Array(); if(node==null){  node=document; } if(tag==null){  tag='*'; } var els=node.getElementsByTagName(tag); var elsLen=els.length; var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for(i=0,j=0;i<elsLen;i++) {  if(pattern.test(els[i].className)){  classElements[j]=els[i];  j++;  } } return classElements;}window.onload=function(){ getElementsByClass("haha")[0].style.color="#F00";}</script></head><body> <div class="mytest haha">大家好</div></body></html>

以上代码模拟实现了getElementsByClassName()功能,下面简单介绍一下如何实现此功能:
一.实现原理:
通过getElementsByTagName()函数获取相应的对象集合,然后再使用for循环语句来遍历每一个对象,并使用pattern.test()检测对象的className属性值是否含有正则表达式所匹配的内容,如果有则说明对象的具有指定的class属性值,并将此对象存储在classElements数组中,最后返回此数组,此数组中的元素即是具有指定class属性值的对象。
二.代码注释:
1.var classElements=new Array(),创建一个数组用来存放具有指定class属性值的对象。
2.if(node==null),判断是否指定了节点,如果没有则使用document作为默认节点。指定了getElementsByTagName()的查找范围。
3.if(tag==null),判断是否指定了标签名称,如果没有则使用通配符(*),也就是获取所有的标签。
4.var els=node.getElementsByTagName(tag),获取指定节点下具有指定标签名称的对象。
5.var elsLen=els.length,获取对象的数量。
6.var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)"),创建一个正则对象,规定如何检索具有给定class属性值的对象。这里需要具有一定的正则表达式知识。之所以使用以上规则就是为兼容这种形式的class属性值和防止一个class属性值中包含有要检索的class属性值被匹配的情况,例如,一个 ,另一个,如果要检索"hao",这样"haorenyisheng"就不会被匹配了。
7.for循环用来执行便利每一个对象的className属性值(即class属性值),并检测是否符合匹配规则,如果符合则将此对象存入classElements数组。
8.return classElements,返回数组对象,即具有指定class属性值的对象。
9.getElementsByClass("haha")[0].style.color="#F00",设置class属性值为"haha"的对象中字体颜色为#F00。