[置顶]getElementsByClassName

来源：互联网发布：龙胆泻胆丸知柏地黄丸编辑：程序博客网时间：2024/04/28 05:06

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>

0 0