推荐一个封装好的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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
javascript cookies操作集合
Apr 12 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
js只执行1次的函数示例
Jul 20 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
基于vue+canvas的excel-like组件实例详解
Nov 28 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
Smarty使用自定义资源的方法
2015/08/08 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
奇妙的js
2007/09/24 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
聊聊python中的循环遍历
2020/09/07 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
宣传保护环境的公益广告词
2014/03/13 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
2015年企业新年寄语
2014/12/08 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2015年共青团工作总结
2015/05/15 职场文书
初婚未育证明样本
2015/06/18 职场文书
五年级作文之成长
2019/09/16 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
Redis三种集群模式详解
2021/10/05 Redis