推荐一个封装好的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的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
Js实现自定义右键行为
Mar 26 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
如何快速上手Vuex
Feb 14 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
在vue中使用jointjs的方法
2018/03/24 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
pycharm实现猜数游戏
2020/12/07 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
如何执行一个shell程序
2012/11/23 面试题
学院书画协会部门职责
2013/11/28 职场文书
酒店执行总经理岗位职责
2013/12/15 职场文书
化学工程专业求职信
2014/08/10 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
身份证丢失证明
2015/06/19 职场文书
导游词之韩国济州岛
2019/10/28 职场文书