推荐一个封装好的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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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 文章调用类代码
2011/08/11 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
js验证密码强度解析
2020/03/18 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python中字典映射类型的学习教程
2015/08/20 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
大学军训感言600字
2014/02/25 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
保护环境的标语
2014/06/09 职场文书
2015年项目工作总结
2015/04/29 职场文书
新闻稿怎么写
2015/07/18 职场文书