解决ie8（及其以下）不支持getElementsByClassName的问题

Posted 2020-08-16

这是我的第1篇技术笔记，与大家分享的是：解决IE8（及以下）不支持getElementsByClassName的方法。如果有说错的地方，麻烦留言告诉我，我及时更正，一来是更新一下我的认知，二来也是不要误导的他人，谢谢。

我们在给元素设置样式的时候，可以说用的最多的就是类（class）了。遗憾的是在低版本IE浏览器（IE8及其以下版本）中，我们不能用getElementsByClassName，因为IE没有为document对象添加这个方法。

// IE8及其以下版本中 这个结果是false
console.info(‘getElementsByClassName‘ in window.document);

下面，分享一下我的getElementsByTagName的兼容写法：

    /* 
    参数说明：
        obj参数：一个DOM对象，getClass函数会取得这个对象下的全部元素节点。
        sClass：一个字符串，获取元素的类（class）名。
    */
    function getClass(obj,sClass){
        // 准备一个数组 做为函数调用的结果返回
        var aResult = [];
        // 如果docuemnt对象中有getElementsByClassName这个方法 我们就用浏览器提供的 
　　　　　　 因为浏览器提供的效率更高
        if(‘getElementsByClassName‘ in document){
            aResult = obj.getElementsByClassName(sClass);
        }
        // 如果浏览器没有 那么我们自己来实现 总共4步
        else{ 
            //1.获取obj下所有的元素
            var aEle = obj.getElementsByTagName(‘*‘);
            //2.用for循环来检查每个子元素
            for( var i=0; i<aEle.length; i++ ){
                // 3.得到每个子元素className值 这个值是字符串
                var str = aEle[i].className;
                // 4.如果该元素的class属性有我们需要的class 那么把它放进aResult
                if(str.indexOf(sClass)!=-1){ 
                    aResult.push(aEle[i]);
                }
            }
        }
        return aResult;
    }