如何让javascript支持getElementsByClassName
2012-03-26 11:34
323 查看
我们知道,在javascript中有几种DOM方法可以获取元素的节点,常用的有getElementById,getElementsByName,getElementsByTagName。但是我们在写页面时,用的最多的还是class,而javascript中缺没有getElementsByClassName方法,很让人纠结(在html5中已经可以使用该方法)。
下面我们就通过已有的DOM方法来写个getElementsByClassName方法,话不多说先附上代码:
代码解析:
我们先建立一个函数getElementsByClassName并传递一个参数classname,而这个classname就是我们所希望得到的类。
通过类获取到的元素可能有一个,也可能有多个,所以它和getElementsByTagName一样,返回的是一个对象数组。
我们知道,类都是应用在html标签上,如 div,p,ul,li等,所以我们要获取到整个文档下的所有html标签,把它们赋给elems这个数组。
遍历elems数组,判断数组中的标签类名是否是我们需要的(classname),如果是我们需要的,就把它赋给前面所建立的results数组。
最后我要说明下,想要获取类节点的方法有很多,我的方法并不是最好的,比如它不支持获取多个类。
最后的最后,我刚刚开始学习javascript,是个新手,如果哪里有不对的地方,欢迎大牛指导。
PS:博客搬家了,以后不再 CSDN 更新了,见谅。最新博客地址:http://www.cnblogs.com/yjzhu/
下面我们就通过已有的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/
相关文章推荐
- 解决 IE 不支持 document.getElementsByClassName()
- IE不支持getElementsByClassName最终完美解决方案
- JavaScript: Get Elements by ID, Tag, Name, Class
- IE不支持getElementsByClassName解决办法
- ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。
- IE6,7,8浏览器不支持 document.getElementsByClassName
- 进一步优化—IE8以下浏览器不支持document.getElementsByClassName() 访问节点;怎么解决?---封装自己的类名
- 解决 IE 不支持 document.getElementsByClassName() 的方法
- 解决 IE 不支持 document.getElementsByClassName() 的方法
- javascript getElementsByClassName实现代码
- 浏览器不支持getElementsByClassName的解决办法
- 每日一题_JavaScript.使getElementsByClassName兼容IE7/8和火狐?
- 解决IE8一下不支持getElementsByClassName的方法
- js获取class-----ie不支持getElementsByClassName
- 解决对象不支持“getElementsByClassName”属性或方法 ie兼容性
- IE8以下浏览器不支持document.getElementsByClassName() 访问节点;怎么解决?---封装自己的类名
- IE不支持getElementsByClassName最终完美解决方案
- js 如何获取class的元素 以及创建方法getElementsByClassName
- [ javascript ] getElementsByClassName与className和getAttribute!
- js 教你怎么封装 例如如何封装getElementsByClassName()方法