zoukankan      html  css  js  c++  java
  • 通过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转换成数组,然后挨个判断,不过这样反而更麻烦了。

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

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

  • 相关阅读:
    神经网络
    密度峰值聚类
    kylin从入门到实战:实际案例
    [时间序列分析][3]--自相关系数和偏自相关系数
    时间序列分析之指数平滑法(holt-winters及代码)
    时间序列模型
    python3.5如何安装statsmodels包?
    时间序列分析和预测
    Xshell6和Xftp6 破解免安装版,无窗口多开限制
    优化问题
  • 原文地址:https://www.cnblogs.com/pssp/p/5511904.html
Copyright © 2011-2022 走看看