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

如何让javascript支持getElementsByClassName

2012-03-26 11:34 323 查看
我们知道,在javascript中有几种DOM方法可以获取元素的节点,常用的有getElementById,getElementsByName,getElementsByTagName。但是我们在写页面时,用的最多的还是class,而javascript中缺没有getElementsByClassName方法,很让人纠结(在html5中已经可以使用该方法)。

下面我们就通过已有的DOM方法来写个getElementsByClassName方法,话不多说先附上代码:
function getElementsByClassName(classname) {
var results = new Array();
var elems = document.getElementsByTagName("*");
for(var i = 0; i<elems.length; i++) {
if(elems[i].className.indexOf(classname) != -1) {
results[results.length] = elems[i];
}
}
return results;
}

代码解析:
function getElementsByClassName(classname) {
//代码
}

我们先建立一个函数getElementsByClassName并传递一个参数classname,而这个classname就是我们所希望得到的类。
var results = new Array();

通过类获取到的元素可能有一个,也可能有多个,所以它和getElementsByTagName一样,返回的是一个对象数组。
var elems = document.getElementsByTagName("*");

我们知道,类都是应用在html标签上,如 div,p,ul,li等,所以我们要获取到整个文档下的所有html标签,把它们赋给elems这个数组。
for(var i = 0; i<elems.length; i++) {
if(elems[i].className.indexOf(classname) != -1) {
results[results.length] = elems[i];
}
}

遍历elems数组,判断数组中的标签类名是否是我们需要的(classname),如果是我们需要的,就把它赋给前面所建立的results数组。
return results
把results数组返回给getElementsByClassName函数。
最后我要说明下,想要获取类节点的方法有很多,我的方法并不是最好的,比如它不支持获取多个类。
最后的最后,我刚刚开始学习javascript,是个新手,如果哪里有不对的地方,欢迎大牛指导。


PS:博客搬家了,以后不再 CSDN 更新了,见谅。最新博客地址:http://www.cnblogs.com/yjzhu/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息