您所在的位置:小祥子 » 编程 » JavaScript » 正文

getElementsByClassName()用法详解

时间:2015-07-13 编辑:程序员小菜 来源:CnBlogs

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 class="mytest">大家好</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="mytest haha"这种形式的class属性值和防止一个class属性值中包含有要检索的class属性值被匹配的情况,例如,一个class="haorenyisheng" ,另一个class="hao",如果要检索"hao",这样"haorenyisheng"就不会被匹配了。
7.for循环用来执行便利每一个对象的className属性值(即class属性值),并检测是否符合匹配规则,如果符合则将此对象存入classElements数组。
8.return classElements,返回数组对象,即具有指定class属性值的对象。
9.getElementsByClass("haha")[0].style.color="#F00",设置class属性值为"haha"的对象中字体颜色为#F00。

关键词:用法