您的位置：首页 > 其它

函数getElementsByClassName

2016-03-01 16:26 330 查看

记录学习JavaScript中遇到的知识点

函数getElementsByClassName()的具体实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Exercises.</title>
</head>
<body>
<h1>getElementsByClassName.</h1>
<span class="a">1</span>
<span class="a">2</span>
<p class="a">3</p>
<div class="b">4</div>
<strong class="b">5</strong>
<div id="wrapper"><strong class="b">6</strong></div>
</body>
</html>
<script type="text/JavaScript">
//接收三个函数，第一个参数class名必须，后两个参数可选，
//第二个参数为父容器（缺省为body节点），第三个为DOM节点的标签名。
function getElementsByClassName(str,root,tag){
if(root){
root=typeof root=="string" ? document.getElementById(root) : root;
}
else{//参数root缺省则为body节点
root=document.body;
}
tag=tag || "*";
var els=root.getElementsByTagName(tag),arr=[];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<l;j++){
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
var aEls=getElementsByClassName("a"),
bEls=getElementsByClassName("b","wrapper"),
bEls2=getElementsByClassName("b",null,"strong");
alert(aEls.length);//3 (1,2,3)
alert(bEls.length);//1 (6)
alert(bEls2.length);//2 (5,6)
</script>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航