首页 > 设计 > WEB开发 > 正文

getElementsByClassName()用法详解

2019-11-04 08:04:24
字体:
来源:转载
供稿:网友

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 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。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表