推荐一个封装好的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 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
js操作二进制数据方法
Mar 03 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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 5.0 Pear安装方法
2006/12/06 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php curl发送请求实例方法
2019/08/01 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
JS的反射问题
2010/04/07 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python中的日期时间处理详解
2016/11/17 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
请用用Java代码写一个堆栈
2012/01/26 面试题
舞蹈毕业生的自我评价
2014/03/05 职场文书
《火烧云》教学反思
2014/04/12 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
劳模先进事迹材料
2014/12/24 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
python脚本框架webpy模板控制结构
2021/11/20 Python