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。
新闻热点
疑难解答
