推荐一个封装好的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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
JS变量及其作用域
Mar 29 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
vue实现树形菜单效果
Mar 19 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
js实现左右轮播图
Jan 09 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php中的一些数组排序方法分享
2012/07/20 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
js 调整select 位置的函数
2008/02/21 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
python实现Flappy Bird源码
2018/12/24 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
工作违纪检讨书
2014/02/17 职场文书
大学生就业意向书范文
2014/04/01 职场文书
家庭教育的心得体会
2014/09/01 职场文书
党员评议思想汇报
2014/10/08 职场文书
体育教师个人工作总结
2015/02/09 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers