关于js根据类名获取元素

最近在仿照阴阳师官网首页来做练习(使用原生js),碰到了一些问题,如js中根据类名来获取元素。

因为document.getElementsByClassName有兼容性的问题,所以根据类名来获取元素一般都是自己写一个方法,以前一直用的方法是这样的:


/**
 * 
 * 作用:根据指定的类名查找元素
 * 
 * 参数:
 * @param  oParent:需要查找的元素的父级(对象),可以是document
 * @param  classname:需要查找的类名(字符串)
 * 
 * 函数内局部变量:
 * oChild  根据父级oParent获取到的该标签下的所有标签
 * arr     存储拥有需要查找的classname的元素
 * 
 * 实现步骤:
 * 1.获取父级oParent下的所有标签并存储到oChild中
 * 2.定义空数组arr
 * 3.对oChild进行循环,如果某个元素的类名与传入进来的
 *   类名一致,便将该元素添加到arr中
 * 4.循环完毕,将arr返回
 */
function getClass(oParent, classname){
    var oChild = oParent.getElementsByTagName('*');
    var arr = [];

    for(var i = 0, len = oChild.length; i < len; i ++){
        if(oChild[i].className == classname){
            arr.push(oChild[i]);
        }
    }
    return arr;
}

在做页面时,我在一个元素上设置了很多类名(例如:公共的类,私有类,鼠标经过时候的类),当我用这个getClass方法获取元素时,发生了问题。获取不到我想要的元素。

后来花了我大半天的时间,发现原来是:这种写法只能获取到只有一个类名时的元素,如果同时有很多个类,那么用这种方法就不行了。

后来,经过自己对该方法的改进,终于成功进化成为getClass究极形态:


/**
 * 
 * 作用:根据指定的类名查找元素
 * 
 * 参数:
 * @param  classname:需要查找的类名(字符串)
 * @param  oParent(可有可无):需要查找的元素的父级(对象),如果没
 *         传入,默认为document;如果需要缩小范围,提高查找速度,可以
 *         给值(建议给)
 * 
 * 函数内局部变量:
 * oChild  根据父级oParent获取到的该标签下的所有标签
 * arr     存储拥有需要查找的classname的元素
 * 
 * 步骤:
 * 1.判断是否有传入oParent,如果没有传入,则赋予初始值document
 * 2.获取父级oParent下的所有标签并存储到oChild中
 * 3.定义空数组arr
 * 4.对oChild进行循环,利用字符串函数indexOf对每个元素的类名进行查找(
 *   类名可能不止一个),如果在类名中找到了传入进来的类名,便将拥有该类名
 *   的元素添加到arr中
 * 5.循环完毕,将arr返回
 */
function getClass(classname, oParent){

    if(!oParent){
        oParent = document;
    }

    var oChild = oParent.getElementsByTagName('*');
    var arr = [];

    for(var i = 0, len = oChild.length; i < len; i ++){
        // indexOf,在字符串中查找指定字符,如果查找到了,返回该字符
        // 在字符串中的索引;如果没有找到,返回-1
        // 索引有可能为0,所以大于等于0就意味着找到
        if(oChild[i].className.indexOf(classname) >= 0){
            arr.push(oChild[i]);
        }
    }
    return arr;
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值