通过Class获取标签,兼容的几种思路

在js中通过document.getElementsByClassName()在低版本IE浏览器中不兼容。然后我写了几种方案,大家可以参考参考。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p class=" r aaa">3</p>
    <p>4</p>
    <p class="aaa">5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</body>
</html>

js代码

<script>

    // 方案1 :正则
    function getClass(className){
        // 获取所有标签
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的标签
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 创建正则,通过正则的test方法判断当前元素的class中是否存在正则中的内容,返回一个true或者false
            if(new RegExp(className).test(lis[i].className)){
                // 如果有则添加到arr中
                arr.push(lis[i]);
            }
        }
        // 返回过滤后的数组。
        return arr;
    }
    
    // 方案2 :利用字符串的indexOf判断 找不到返回-1
    function getClass1(className){
        // 获取所有元素
        var lis = document.getElementsByTagName('*');
        // 保存过滤后的数组
        var arr = [];
        for(var i=0;i<lis.length;i++){
            // 判断所有标签的class有没有我们想要的
            if(lis[i].className.indexOf(className)!=-1){
                // 添加到新数组
                arr.push(lis[i]);
            }
        }
        // 返回
        return arr;
    }

    console.log(getClass('aaa'));
    // [p.r.aaa, p.aaa]
    console.log(getClass1('aaa'));
    // [p.r.aaa, p.aaa]

</script>

还可以将获取到的class转换成数组,然后挨个判断,不过这样反而更麻烦了。

建议通过父级再通过*获取元素,性能会好一些。

唉,感觉自己写新手慢慢的看不懂了,也许真的是自己进步了吧,不知道是高兴还是悲伤。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值