JavaScript通过HTML的class来获取HTML元素的方法总结
对于js来说，我想每一个刚接触它的人都应该会抱怨：为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持getElementsByClassName()函数，但是对于低版本浏览器来说，还是无法兼容，在脱离其他库的时候，还是得自己封装一个方法。
方法一
function getByClass1(parent, cls){
var res = []; //存放匹配结果的数组
var ele = parent.getElementsByTagName('*');
for(var i = 0; i < ele.length; i++){
if(ele[i].className == cls){
res.push(ele[i]);
}
}
return res;
}
当然class里的值只有一个时，上面的方法没问题，但当值为多个时，就会出现问题。
<div class="test"></div> <div class="test box"></div> <script> getByClass1(document, 'test'); //只获取到第一个div </script>
方法二
出现问题的时候，我们会尝试着改进，对于多类名的情况我们可以用正则去匹配是否包含所要查找的class名，于是就出现了下面这种写法：
function getByClass2(parent, cls){
var res = [];
var reg = new RegExp('\\b' + cls + '\\b', 'i'); //匹配cls是一个独立的单词
var ele = parent.getElementsByTagName('*');
for(var i = 0; i < ele.length; i++){
if(reg.test(ele[i].className)){
res.push(ele[i]);
}
}
return res;
}
这种方法看似可以，解决了getByClass1()的问题，我也用了好长一段时间，但是还会有一个隐藏的bug。看下面的例子：
<div class="test"></div> <div class="test_box"></div> <div class="test-box"></div> <script> getByClass2(document, 'test'); //结果获取到了第一个div和第三个div </script>
理论上应该只获取到第一个，但是却和我们预期不一样。这个bug源于下面这段代码里的\b
var reg = new RegExp('\\b' + cls + '\\b', 'i');
我们先来看下\b在正则中的表示的意思
\b是正则表达式规定的一个特殊代码，代表着单词的开头或结尾，也就是单词的分界处。
通俗点说：\b就是匹配一个单词(从左边界到右边界)。
而问题也就出在这里，\b把除字母、数字、下划线外的其他字符都当成是边界，对于上面的例子中第三个class值为test-box，\b匹配时，把连字符(-)当作单词边界，所以也匹配了第三个div。
方法三
因此我们还需要对上面方法进行进一步改进，这里参考了stackoverflow上提到的一种方法：
How to Get Element By Class in JavaScript?
改进后的代码如下：
function getByClass3(parent, cls){
var res = [];
var reg = new RegExp(' ' + cls + ' ', 'i'); //匹配cls时，两边需要有空格
var ele = parent.getElementsByTagName('*');
for(var i = 0; i < ele.length; i++){
if(reg.test(' ' + ele[i].className + ' ')){
res.push(ele[i]);
}
}
return res;
}
这种方法舍去了用\b而采用空格来匹配边界，先在获取到的className值两边加上空格，这样就保证了className里的每个值两边都会有空格，然后再用正则去匹配。
用这种方法暂时还未发现问题，但是使用时，方法中的单引号内的空格一定不能落下。
方法四
function getByClass3(parent, cls){
var res = [];
var reg = new RegExp('(^|\\s)' + cls + '($|\\s)', 'i');
var ele = parent.getElementsByTagName('*');
for(var i = 0; i < ele.length; i++){
if(reg.test(ele[i].className)){
res.push(ele[i]);
}
}
return res;
}
空格完全用正则来处理，这样省去了空格容易落下的问题，代码也更美观精简。
那么这种方法是否就是比较完美的呢，其实不然，下面来看下更优的方案。
方法五（完美版）
文章开头已经提到，高版本的浏览器已经支持getElementsByClassName()方法。出于性能考虑，对支持的浏览器使用原生方法势必会更好。而对于低版本的浏览器使用上面的方法四。
function getByClass(parent, cls){
if(parent.getElementsByClassName){
return parent.getElementsByClassName(cls);
}else{
var res = [];
var reg = new RegExp(' ' + cls + ' ', 'i')
var ele = parent.getElementsByTagName('*');
for(var i = 0; i < ele.length; i++){
if(reg.test(' ' + ele[i].className + ' ')){
res.push(ele[i]);
}
}
return res;
}
}
当然方法五自认为是相对较好的方案，如果有更优秀的方法欢迎留言补充。
相关文章
这篇文章主要介绍了一文搞懂Map与Set的用法和区别,文章开头给大家介绍了map和set的基本概念，了解这些基础知识能够帮助我们更好的使用，需要的朋友可以参考下2022-06-06
Django1.7+JQuery+Ajax验证用户注册集成小例子
下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时，用户名存在不存在的一个小应用。注意，验证存在不存在使用的是Ajax的方式，不用让用户点击按钮验证是否存在,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JavaScript弹出新窗口后向父窗口输出内容的方法,涉及javascript窗口操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JavaScript设计模式之适配器模式，对设计模式不熟悉的同学，可以参考学习一下2021-04-04
Bootstrap Metronic完全响应式管理模板学习笔记
这篇文章主要为大家分享了Bootstrap Metronic完全响应式管理模板学习笔记，感兴趣的小伙伴们可以参考一下2016-07-07
JavaScript基于libgif.js实现控制gif动画帧
这篇文章主要为大家详细介绍了JavaScript如何利用libgif.js插件控制gif动画帧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
js设置控件的隐藏与显示，设置控件style的display和visibility属性就可以了，下面有个示例，需要的朋友可以参考下2014-08-08
下面小编就为大家带来一篇js内置对象处理_打印学生成绩单的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
Base64是一种用64个字符来表示任意二进制数据的方法，这篇文章主要为大家介绍了如何实现将图片转为base64格式，感兴趣的小伙伴可以学习一下2023-07-07
这篇文章主要介绍了js实现div弹出层的方法,以实例的形式完整的实现了js弹出div层的效果,并且弹出层可拖拽、可关闭,用户还可根据个人喜好自定义弹出层的显示效果,非常具有实用价值,需要的朋友可以参考下2014-11-11
最新评论