推荐一个封装好的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生成随机颜色示例代码
May 05 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
element中table高度自适应的实现
Oct 21 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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 程式大小
2006/12/06 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python迭代和迭代器详解
2016/11/10 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
2014年安全生产责任书
2014/07/22 职场文书
政风行风评议工作总结
2014/10/21 职场文书
财务工作失职检讨书
2014/11/21 职场文书
工作调动申请报告
2015/05/18 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android