推荐一个封装好的getElementsByClassName方法

我们知道，原生的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+

小伙伴们自己使用一下就知道了，超级好用，扩散下给其他小伙伴吧。

赞 (0)

相关推荐

  • javascript getElementsByClassName实现代码

    先来看一下代码:(支持多个class查询和在某个范围内进行查询) 复制代码 代码如下: /* * 根据元素clsssName得到元素集合 * @param fatherId 父元素的ID,默认为document * @tagName 子元素的标签名 * @className 用空格分开的className字符串 */ function getElementsByClassName(fatherId,tagName,className){ node = fatherId&&document.

  • javascript getElementsByClassName函数

    今天在网上看到的一个根据ClassName获取Elements的脚本,在此记录一下,以便日后使用. 复制代码 代码如下: var getElementsByClassName = function(searchClass, node, tag) { if (document.getElementsByClassName) { return document.getElementsByClassName(searchClass) } else { node = node || document;

  • javascript getElementsByClassName 和js取地址栏参数

    getElementsByClassName() 为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName.这是对浏览器自有DOM方法的一个简单但实用的扩充. 此方法有两个参数:ele指出以哪个DOM节点为根节点寻找(也就是说只找ele的子节点),className指出符合条件的节点的class属性中必须包含怎样的className.它的返回值是一个数组,存放了所有符合条件的节点. 复制代码

  • IE浏览器不支持getElementsByClassName的解决方法

    在DOM3里已经加入了getElementsByClassName这个方法,然而IE9.10以外的其它版本均不支持,这是一块伤痛啊! 目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果不支持,就在document对象里加入getElementsByClassName这个方法,这样的写法有一个好处,即不管有没有原生函数你都不用去修改代码. 网上部分人直接定义一个getElementsByClassName函数,但是这样的话就需要把代码中所有使用document.getElement

  • js 获取class的元素的方法 以及创建方法getElementsByClassName

    复制代码 代码如下: function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName('*'); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allEleme

  • IE不支持getElementsByClassName最终完美解决方案

    目前可以这么解决,判断浏览器支不支持这个方法,如果支持就不管:如果不支持,就在document对象里加入getElementsByClassName这个方法,这样的写法有一个好处,即不管有没有原生函数你都不用去修改代码. 通常先使用getElementsByTagName("*")取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回.由于IE5不支持document.getElementsByTagName("*"),要使用分支docume

  • 关于IE中getElementsByClassName不能用的问题解决方法

    今天使用getElementsByClassName写了段小程序,满怀欣喜的准备去测试,在ff,谷歌等主流浏览器上测试都没问题,在IE9上也没问题,在IE6.8中测试的时候就出现问题了,浏览器报错.纠结了下代码,貌似没问题,果断找度娘...终于发现问题所在,然来是IE6.8中不支持getElementsByClassName这种方法.随后在网上搜索解决方法,找到了一个比较好的方法,是个老外写的一个方法,定睛一看居然是05年的问题了...先上代码: 复制代码 代码如下: * Developed b

  • 推荐一个封装好的getElementsByClassName方法

    我们知道,原生的JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class的节点集合,注意是集合,也就是此函数返回一个数组. 但是,IE却并不支持这个方法,但这方法却是很有实用性,所以,我们又不得不专门为IE实现这么一个函数. 复制代码 代码如下: function getElementsByClassName(oEle,sClass,sEle){   if(oEle.getElementsByClassName){     return oEle

  • Oracle数据库"记录被另一个用户锁住"解决方法(推荐)

    1.先来看看为什么会出锁住: 数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性. 加锁是实现数据库并发控制的一个非常重要的技术.当事务在对某个数据对象进行操作前,先向系统发出请求,对其加锁.加锁后事务就对该数据对象有了一定的控制,在该事务释放锁之前,其他的事务不能对此数据对象进行更新操作. 在数据库中有两种基本的锁类型:排它锁(Exclusive Locks,即X

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

  • 基于原生ajax与封装的ajax使用方法(详解)

    基于原生ajax与封装的ajax使用方法(详解)

    当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)

    本文实例讲述了CI框架封装的常用图像处理方法.分享给大家供大家参考,具体如下: 其实微信手机端上图时,列表图最好是缩略图,节省流量,这不,又被移动坑了一把,话费签一分就停机,流量欠到90块才停机,我也是醉了... 不说废话了,下面是用CI 的内置处理图像的库写的,小弟不才,遗漏之处敬请指出,谢谢. /** * 生成缩略图 * @param $path 原图的本地路径 * @return null 创建一个 原图_thumb.扩展名 的文件 * */ public function dealthu

  • 总结PHP删除字符串最后一个字符的三种方法

    一.前言 从数据库中select()读取一对多的信息时,经常需要将取出的数组用某个特定的字符分割,然后拼接成字符串. 常见的语法格式: foreach ($arr as $key => $value) { $arr_str = $arr['x_id'] . ',' . $arr_str; } 假设字符数组 $arr 中的字符分别为 arr[0] = 'a'; arr[1] = 'b'; arr[2] = 'c'; 则,拼接后的 $arr_str 字符串为 a,b,c, 这个时候,就需要我们对最后

  • jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支

  • java 中的封装介绍及使用方法

    java 中的封装介绍及使用方法 在面向对象程式设计方法中,封装(英语:Encapsulation)是指一种将抽象性函式接口的实现细节部份包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访问. 要访问该类的代码和数据,必须通过严格的接口控制. 封装最主要的功能在于我们能修改自己的实现代码,而不用修改那些调用我们代码的程序片段. 适当的封装可以让程式码更容易理解与维护,也加强了程式码的安全性. 封装的优点 1. 良好的封装能够减少耦合. 2. 类内部

  • JS中判断某个字符串是否包含另一个字符串的五种方法

    String对象的方法 方法一: indexOf()   (推荐) var str = "123" console.log(str.indexOf("2") != -1); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg

随机推荐