ie8以下兼容性问题——document.getElementsByClassName

最新推荐文章于 2022-04-24 21:48:43 发布

昔年年年

最新推荐文章于 2022-04-24 21:48:43 发布

阅读量360

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_31448171/article/details/80110248

版权

本文探讨了在IE8及更低版本中`document.getElementsByClassName`的兼容性问题，并提供了一种通过自定义函数`getClassNames`来解决此类问题的方法，建议将所有`getElementsByClassName`替换为`getClassNames`，以此方式处理类似document.getElementById等方法的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html中可以使用如下代码进行兼容性编程：

<!--[if IE 8]>仅IE8可识别<![endif]-->
<!--[if lte IE 8]> IE8及其以下版本可识别<![endif]-->
<!--[if lt IE 8]> IE8以下版本可识别<![endif]-->
<!--[if gte IE 8]> IE8及其以上版本可识别<![endif]-->
<!--[if gt IE 8]> IE8以上版本可识别<![endif]-->
<!--[if IE]> 所有的IE可识别<![endif]-->
<!--[if !IE]>--除IE外都可识别<!--<![endif]-->（对ie10及以上版本可识别）

如上问题为兼容性问题的js脚本问题，针对此类问题我们可以自己编写函数来解决此类问题：

//类似于divs = document.getElementsByClassName('mydiv'); 
var  divs = getClassNames('mydiv' , 'div');  
//判断是否能用document.getElementsByClassName，不能则通过节点查找
function getClassNames(classStr,tagName){  
   if (document.getElementsByClassName) {
         return document.getElementsByClassName(classStr)；
      }else {
        var nodes = document.getElementsByTagName(tagName),
            ret = [];  
        for(i = 0; i < nodes.length; i++) {  
         if(hasClass(nodes[i],classStr)){  
            ret.push(nodes[i]);
         }
      }
      return ret;  
      }  
}  
function hasClass(tagStr,classStr){  
   var arr=tagStr.className.split(/\s+/ );  //这个正则表达式是因为class可以有多个,判断是否包含  
     for (var i=0;i<arr.length;i++){  
            if (arr[i]==classStr){  
                  return true ;  
            }  
     }  
     return false ;  
}

最后把所有的document.getElementsByClassName（）方法换成getClassNames（）方法，其余类似的document.getElement方法可以按此思路解决。