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。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢