推荐一个封装好的getElementsByClassName方法


Posted in Javascript onDecember 02, 2014

我们知道,原生的JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class的节点集合,注意是集合,也就是此函数返回一个数组。

但是,IE却并不支持这个方法,但这方法却是很有实用性,所以,我们又不得不专门为IE实现这么一个函数。

function getElementsByClassName(oEle,sClass,sEle){

  if(oEle.getElementsByClassName){

    return oEle.getElementsByClassName(sClass);

  }else{

    var aEle=oEle.getElementsByTagName(sEle || '*'),

      reg=new RegExp('(^|\\s)'+sClass+'($|\\s)'),

      arr=[],

      i=0,

      iLen=aEle.length;
    for(; i<iLen; i++){

      if(reg.test(aEle[i].className)){

        arr.push(aEle[i]);

      }

    }

    return arr;

  }

}

使用方法:

//第一种:选择document下的所有class为box_box的div元素

  getElementsByClassName(document,'box_box','div')[0].style.background='yellow';
//第二种:选择document下的所有class为box-box的div元素

  getElementsByClassName(document,'box-box','div')[0].style.background='yellow';
//第三种:选择document下的所有class为box-box元素

  getElementsByClassName(document,'box-box')[0].style.background='yellow';

oEle、sClass是必填的,sEle是选填的。

sClass中又中横线或下划线亲测木有问题,比如说:box-box box_box;但是如果是其他特殊字符就很有可能有问题了,如:box$box…  当然可以自己加转义搞定特殊字符,如:box\\$box…

兼容性:亲测ie6+

小伙伴们自己使用一下就知道了,超级好用,扩散下给其他小伙伴吧。

Javascript 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 #Javascript
JavaScript和CSS交互的方法汇总
Dec 02 #Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 #Javascript
javascript函数声明和函数表达式区别分析
Dec 02 #Javascript
javascript常用方法汇总
Dec 02 #Javascript
js时间日期格式化封装函数
Dec 02 #Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
php随机显示图片的简单示例
2014/02/15 PHP
PHP错误机制知识汇总
2016/03/24 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
js操作select控件的几种方法
2010/06/02 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
python实现多线程端口扫描
2019/08/31 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
趣味比赛活动方案
2014/02/15 职场文书
小学毕业演讲稿
2014/04/25 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
小学生作文评语集锦
2014/12/25 职场文书
食品药品安全责任书
2015/05/11 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
Python OpenGL基本配置方式
2022/05/20 Python