原生JS解决getElementsByClassName浏览器兼容问题(适用于多个类名)

忘是亡心i 2022-06-04 10:08 170阅读 0赞

//getElementsByClassName兼容问题解决，返回一个同类名的元素数组
    var getElementsByClassName = function(classname) {
        
        //如果浏览器支持getElementsByClassName，使用现有方法
        if(document.getElementsByClassName) {
            return document.getElementsByClassName(classname);
        }else{
            //定义一个数组保存所要获取的变量
            var results=new Array();
            var elems=document.getElementsByTagName("*");
            for (var i=0;i<elems.length;i++) {
                if(elems[i].className){
                    //将className通过空格分开并保存到数组
                    var elem_classname = new Array();
                    elem_classname = elems[i].className.split(' ');
                    for (var j=0;j<elem_classname.length;j++) {
                        //如果传入的类名和循环的类名相同，返回这个元素到results数组
                        if (classname == elem_classname[j]) {
                            results.push(elems[i]);
                        }
                    }
                }
            }
            return results;
        }
    }

**注意：**

> getElementsByClassName()方法和上述getElementsByClassName()函数所得出的结果都是一个数组，酌情使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js+JQuery在浏览器之间兼容的坑

1、new Date()函数在Firefox、IE9中，`new Date("2015-09-16 11:01:05")`会报 Invalid Date 的错误。

缺乏、安全感/ 2022年08月08日 14:41/ 0 赞/ 167 阅读

相关原生JS解决getElementsByClassName浏览器兼容问题(适用于多个类名)

//getElementsByClassName兼容问题解决，返回一个同类名的元素数组 var getElementsByClassName = functio

忘是亡心i/ 2022年06月04日 10:08/ 0 赞/ 171 阅读

相关原生JS兼容所有浏览器获取浏览器高度和宽度,响应式布局 js 获取浏览器高度和宽度值(兼容多浏览器)

原生JS兼容所有浏览器获取浏览器高度和宽度,响应式布局 js 获取浏览器高度和宽度值(兼容多浏览器) var width = window.innerWid

淩亂°似流年/ 2022年05月15日 15:20/ 0 赞/ 293 阅读

相关原生js怎么添加一个或多个类名？（赞）

原文出处：[https://www.jianshu.com/p/e09271abebc7][https_www.jianshu.com_p_e09271abebc7] 好吧

末蓝、/ 2022年05月11日 00:06/ 0 赞/ 188 阅读

相关 js多行省略兼容浏览器

废话不说直接上代码啦， <!DOCTYPE html> <html> <head> <meta charset="utf-8">

拼搏现实的明天。/ 2022年04月17日 05:06/ 0 赞/ 226 阅读

相关原生JS的兼容性问题

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题　封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)

妖狐艹你老母/ 2021年12月12日 00:23/ 0 赞/ 331 阅读

相关封装原生js最常用的10个方法（兼容所有浏览器）

1、事件封装 function addEvent(elem,type,handle){ if(elem.addEventListener){

旧城等待，/ 2021年10月15日 23:25/ 0 赞/ 484 阅读

相关 getElementsByClassName兼容新老浏览器方法

html5 dom中新增了一个getElementsByClassName方法，我们可以通过class属性的类名访问到元素。新出的方法多少有点兼容性问题，这个是跑不了的，

亦凉/ 2021年09月22日 09:14/ 0 赞/ 244 阅读

相关原生js兼容性问题

1. 获取标签样式的兼容性问题 1. getComputedStyle(node,null).value 不支持IE8以及以下第一个参数是节点对象,第二

喜欢ヅ旅行/ 2021年09月17日 17:44/ 0 赞/ 450 阅读

相关 js 浏览器兼容性问题

0、js原生对象获取自定义属性值的问题： <input type="text" id="test" test="abc" /> 在IE下，发现使用$("\te

电玩女神/ 2021年06月24日 13:58/ 0 赞/ 670 阅读