推荐一个封装好的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 document.referrer 用法
Apr 30 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
Node.js 使用AngularJS的方法示例
May 11 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 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
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
讲解Python中的标识运算符
2015/05/14 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
pytorch的batch normalize使用详解
2020/01/15 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
django中ImageField的使用详解
2020/12/21 Python
python实现银行账户系统
2021/02/22 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
学历证明范文
2015/06/16 职场文书