首页 > 技术文章 > javascript获取类元素

xiaominwu 2014-10-29 11:30 原文

代码测试是ie5+;

原生javascript中筛选出含有指定类的元素;

思想:在指定范围里把所有的元素筛选出来,然后把里面的每个元素都遍历找出它们含有的所有类,然后逐个元素遍历它们各自的类,如果指定的类和它们里面的类相等,那么就把这个元素放进一个数组中然后返回这个数组。


<span style="font-size:18px;"><!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getClassName(classname,idbox){   /*创建一个函数,可以传入两个参数,指定选择的类,指定选择类的范围*/
var box=document.getElementById(idbox);  //获取ID为第二个参数的元素
var cbox=box || document;  //检测box是否存在(否有传入第二个参数),如果不存在则把document赋予变量cbox(确定指定类的父容器即类的范围)如果有则在指定的容器中寻找类,如果没有则在整个文档中寻找。
var cbox_elem=cbox.getElementsByTagName('*'); //获取指定容器或页面中所有元素
var ctag=new Array(); /*创建一个空数组用来后面放置含有指定类的元素*/
for(var i=0;i<cbox_elem.length;i++){   /*遍历容器中的所有元素*/
var cur_else=cbox_elem[i];  /*把当前遍历的元素赋值给变量cur_else*/
var classnames=cur_else.className.split(' ');
/*把当前遍历的元素中的所有类用空格分开成一个数组并赋值给变量classnames*/
for(var j=0;j<classnames.length;j++){  /*遍历当前元素中里的每个类*/
if(classnames[j]==classname){  /*当前遍历中的类和第一个参数是否相等*/
ctag.push(cur_else); /*相等则把拥有该类的元素添加到先前创建好的数组中*/
break; /*退出这个类循环直接跳到外层元素for语句*/
}
}
}
return  ctag; /*把数组返回给调用的代码,这里把数组返回给变量all_li*/
}
window.onload=function(){
var all_li=getClassName("pp","y");
alert(all_li.length)
}
</script>
</head>
<body>
<!-- 兼容IE5+ -->
<ul id="y">
<li class="pp uu"></li>
<li class="pp"></li>
<li class="pp"></li>
<li ></li>
<li ></li>
</ul>
</body>
</html></span>



知识点学习

JavaScript中的obj.split(a,b) 方法

用于把一个字符串分割成字符串数组。

该方法有两个参数:

a:必需。字符串或者正则表达,用来指定分割的地方。

b:可选。指定返回数组的最大长度,返回指定个数的数组。






推荐阅读