推荐一个封装好的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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
Node.js使用Angular简单示例
May 11 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
Node 模块原理与用法详解
May 13 Javascript
React Fragment介绍与使用详解
Nov 11 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
详解Vite的新体验
2021/02/22 Javascript
实例解析Python中的__new__特殊方法
2016/06/02 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
采购部主管岗位职责
2014/01/01 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
管理建议书范文
2014/05/13 职场文书
平面设计专业求职信
2014/08/09 职场文书
单位工作证明范文
2014/09/14 职场文书
个人授权委托书模板
2014/09/14 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
财务稽核岗位职责
2015/04/13 职场文书
研讨会通知
2015/04/27 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技