您的位置：首页 > Web前端 > JavaScript

[置顶]getElementsByClassName

2015-06-12 10:47 495 查看

HTML5 DOM中新增了一个令人期待已久的方法：getElementsByClassName。这个方法能让我们通过class属性中的类名来访问元素，不过由于这个方法还比较新，某些DOM实现里可能还没有，所以使用的时候要当心。
getElementsByClassName方法非常有用，但只有较新的浏览器才支持它，为了弥补这一不足，DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。

以下这个函数能适用于新老浏览器：

function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(classname);
}
else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}
}

这个getElementsByClassName函数接受两个参数，第一个node表示DOM树中的搜索起点，第二个classname表示要搜索的类名。

如果传入节点上已经存在了适当的getElementsByCLassName函数，那么这个新函数就直接返回相应的节点列表。如果这个函数不存在，这个新函数就会循环遍历所有标签，查找带有相应类名的元素（这个例子不适用于多个类名）。

应用参考代码：

<html>
<meta charset="UTF-8">
<html lang="en">
<head>

</head>
<body>
<ul id="uu">
<li class="list">abc</li>
<li class="list">def</li>
<li class="list">hig</li>
</ul>
<button type="text"  onclick="show()" >book</button>
<script>
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(classname);
}
else{
var results=new Array();
var elems=node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length]=elems[i];
}
}
return results;
}
}
function show(){
var sp=document.getElementById("uu");
var ss=getElementsByClassName(sp,"list");
alert(ss.length);
}
</script>
</body>
</html>

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

标签： js

相关文章推荐

新的分享

章节导航