在使用原生js时候，需要通过class样式名来获取dom对象，就直接使用document.getElementByClassName()，发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢？

方法一：为IE8以下增加document.getElementsByClassName函数,代码如下：

/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
    document.getElementsByClassName=function(cls){
        var els=this.getElementsByTagName('*');
        var ell=els.length;
        var elements=[];
        for(var n=0;n<ell;n++){
            var oCls=els[n].className||'';
            if(oCls.indexOf(cls)<0)        continue;
            oCls=oCls.split(/\s+/);
            var oCll=oCls.length;
            for(var j=0;j<oCll;j++){
                if(cls==oCls[j]){
                    elements.push(els[n]);
                    break;
                }
            }
        }
        return elements;
    }
}

这样就可以直接使用document.getElementByClassName()方法了。

方法二：自己写一个方法来获取classname.代码如下：

function getByClassName(obj,cls){//obj目标元素，cls要获得的class名
    var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到
    var result = []; //定义一个数组，存放获得的classname = "cls" 的所有值
    for(var i = 0; i< element.length; i++){
        if(element[i].className == cls){
            result.push(element[i]);
        }
    }
    return result;
}

使用：

<div id= "diva">
    <div class = "divb">我是div</div>
</div>
<script >
var a = document.getElementById("diva");
var result =getByClassName(a,"divb");
</script>

如果要求的div的父元素没有属性id，或者更向上一层的也没有属性id，那么我能想到的办法就是通过document.body获取到body元素再向下逐层查找。(注：请尽量不要用document.body和document.all)

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/825