继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

IE8支持document.getElementsByClassName,支持获取id之后,再获取ClassName

囡柠
关注TA
已关注
手记 7
粉丝 1
获赞 166

1.一开始在工作中遇到document.getElementsByClassName不支持IE8,经查找资料,采用以下方法解决:

function compatibleIE(){
   if (!document.getElementsByClassName) {
        document.getElementsByClassName = function (className,element) {
            var children = (element || document).getElementsByTagName('*');
            var elements = new Array();
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var classNames = child.className.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        };
    } 
}
compatibleIE();

此方法只支持兼容document.getElementsByClassName。
2.但在目前工作中又遇到了一个问题。通过document.getElementById()获取ID之后,再使用ID.getElementsByClassName,使用1方法是无法解决的,经过查找资料,采用了以下方法:

function compatibleID(id,classname){//封装语句  
    //支持getElementsByClassName的情况下  
    if(document.getElementsByClassName){  
        if(id){//有ID的情况下  
            var arrId=document.getElementById(id); 
                return arrId.getElementsByClassName(classname); 
        }else{  
            return document.getElementsByClassName(classname);  
        }  
    }else{//不支持getElementsByClassName的情况下  
        if(id){  
            var arrId=document.getElementById(id);  
            var dom=arrId.getElementsByTagName("*");  
            var arr=[];  
            for(var i=0;i<dom.length;i++){  
                var txtArr=dom[i].className.split(" ");  
                for(var j=0;j<txtArr.length;j++){  
                    if(txtArr[j]==classname){  
                        arr.push(dom[i]);  
                    }  
                }  
            }  
            return arr;  
        }  
    }  
} 

//调用
var sortIDDev = compatibleID("deiveBox","sortUp");//"deiveBox"为ID,"sortUp"为Class
var sortConDev = sortIDDev[0];//取第一个元素

此方法,需在使用document.getElementsByClassName的地方都要调用这个方法。这样让人感觉有点麻烦,我们可以让其通过ID获取class时候,才调用这个方法,则将1和2进行了合并,见3.
3.此方法是1和2的结合。如下:

//解决IE8之类不支持getElementsByClassName
function compatibleIE(){
   if (!document.getElementsByClassName) {
        document.getElementsByClassName = function (className,element) {
            var children = (element || document).getElementsByTagName('*');
            var elements = new Array();
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var classNames = child.className.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        };
    } 
}
compatibleIE();
//支持getElementsByClassName的情况下 ,让IE8支持id获取class, 即Id.getElementsByClassName
function compatibleID(id,classname){//封装语句  
    if(id){//有ID的情况下  
        var arrId=document.getElementById(id); 
        if(arrId.getElementsByClassName){
            return arrId.getElementsByClassName(classname); 
        }else{
            var dom=arrId.getElementsByTagName("*");  
            var arr=[];  
            for(var i=0;i<dom.length;i++){  
                var txtArr=dom[i].className.split(" ");  
                for(var j=0;j<txtArr.length;j++){  
                    if(txtArr[j]==classname){  
                        arr.push(dom[i]);  
                    }  
                }  
            }  
            return arr; 
        }
    }else{  
        return document.getElementsByClassName(classname);  
    }  
} 

这个方法只有当通过ID获取的时候才调用compatibleID()方法。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP