推荐一个封装好的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不同页面传值的改进版
Sep 30 Javascript
javascript 三种编解码方式
Feb 01 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
vue实现购物车的小练习
Dec 21 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
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php日历制作代码分享
2014/01/20 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
基于Python函数和变量名解析
2019/07/19 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python二元算术运算常用方法解析
2020/09/15 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
电子商务专业学生的自我鉴定
2013/11/28 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
党员目标管理责任书
2014/07/25 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
雷锋之歌观后感
2015/06/10 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
结婚纪念日感言
2015/08/01 职场文书
六年级作文之预言作文
2019/10/25 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android