推荐一个封装好的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 相关文章推荐
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
jquery append与appendTo方法比较
May 24 jQuery
jQuery常用选择器详解
Jul 17 jQuery
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
vue之将echart封装为组件
Jun 02 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 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简单的留言板与回复功能具体实现
2014/02/19 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
python logging类库使用例子
2014/11/22 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
生产部厂长助理职位说明书
2014/03/03 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
政府会议通知范文
2015/04/15 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
用Python可视化新冠疫情数据
2022/01/18 Python
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL