推荐一个封装好的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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
JS打印组合功能
Aug 04 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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 遍历XP文件夹下所有文件
2008/11/27 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
python实现socket端口重定向示例
2014/02/10 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python os.rename实例用法详解
2020/12/06 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
异常和异常类的概念
2014/09/12 面试题
西门豹教学反思
2014/02/04 职场文书
后备干部考察材料
2014/02/12 职场文书
综治工作汇报材料
2014/10/27 职场文书
万能检讨书
2015/01/27 职场文书
关于学习的决心书
2015/02/05 职场文书
开场白怎么写
2015/06/01 职场文书
初婚未育证明样本
2015/06/18 职场文书
升学宴学生致辞
2015/09/29 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python