推荐一个封装好的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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
详解vue组件之间的通信
Aug 30 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
PHP个人网站架设连环讲(一)
2006/10/09 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现简单日历类编写
2020/08/28 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python默认参数调用方法解析
2020/02/09 Python
信号生成及DFT的python实现方式
2020/02/25 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
文体活动实施方案
2014/03/27 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
教师自查自纠材料
2014/10/14 职场文书
初中中等生评语
2014/12/29 职场文书
给老婆的保证书
2015/01/16 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书