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转换成数组,然后挨个判断,不过这样反而更麻烦了。

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

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

  • 相关阅读:
    poj 3068 Bridge Across Islands
    XidianOJ 1086 Flappy v8
    XidianOJ 1036 分配宝藏
    XidianOJ 1090 爬树的V8
    XidianOJ 1088 AK后的V8
    XidianOJ 1062 Black King Bar
    XidianOJ 1091 看Dota视频的V8
    XidianOJ 1098 突击数论前的xry111
    XidianOJ 1019 自然数的秘密
    XidianOJ 1109 Too Naive
  • 原文地址:https://www.cnblogs.com/pssp/p/5511904.html
Copyright © 2011-2022 走看看