解决ie8不兼容getElementsByClassName

|▌冷眼眸甩不掉的悲伤 提交于 2020-03-26 10:58:49

  前端新人,第一篇博客,留给我调试的第一个ie兼容性问题getElementsByClassName,昨晚写到4点,中午起来调到现在,总算有个影子了

  

//用到的ie8支持的方法
var chils= s.childNodes;  //得到s的全部子节点
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSibling;   //获得s的下一个兄弟节点
var ps=s.previousSibling;  //得到s的上一个兄弟节点
var fc=s.firstChild;   //获得s的第一个子节点
var lc=s.lastChild;   //获得s的最后一个子节点
.tagName             //返回值为大写的字符串
var GetElementsByClassName = function(parentNodeName,className,TagName,level,bool){  //parentNodeName : 目标元素的有ID的父辈元素  //className : 目标元素的类名  //TagName : 目标元素的标签名  //level : 目标元素为parentNodeName的第几代子节点  //bool : 布尔值,如果目标元素为直接parentNodeName所有子节点为真,否则为假
    var classArray = new Array();
    var level1 = new Array();
    var level2 = new Array();
    var level3 = new Array();
    if(document.getElementsByClassName){      //判断是否支持document.getElementsByClassName
        return document.getElementsByClassName(className);
    }
    else{
        if(bool==true){                //判断bool值是否为真
            parentNodeName = document.getElementById(parentNodeName);
            classArray[0] = parentNodeName.firstChild;
            i=0;
            while(classArray[i].nextSibling!=null||classArray[i].parentNode!=parentNodeName){  //不是最后一个节点或者父节点不为传入的父元素
                classArray[i+1]=classArray[i].nextSibling;
                i++;
            }
            return classArray;
        }
        else{
            var l=0;
            var m=0;
            var n=0;
            parentNodeName = document.getElementById(parentNodeName);
            
            level1 = parentNodeName.childNodes;        //第一级为传入父元素的子节点
            if(level==1){
                for(var k=0;k<level1.length;k++){  
                    if(level1[k].tagName==TagName){      //若节点为文本节点,则不存入
                        classArray[n]=level1[k];
                        n++;
                    }
                }
                return classArray;
            }
            for(var i=0;i<level1.length;i++){          //第二级为传入父元素的第二代子节点
                for(var j=0;j<level1[i].childNodes.length;j++){
                    if(level1[i].childNodes[j].tagName!=null){
                        level2[l] = level1[i].childNodes[j];
                        l++;
                    }
                }
            }
            if(level==2){
                for(var k=0;k<level2.length;k++){
                    if(level2[k].tagName==TagName){
                        classArray[n]=level2[k];
                        n++;
                    }
                }
                return classArray;
            }
            for(var i=0;i<level2.length;i++){          //第三级为传入父元素的第三代子节点
                for(var j=0;j<level2[i].childNodes.length;j++){
                    if(level2[i].childNodes[j].tagName!=null){
                        level3[m] = level2[i].childNodes[j];
                        m++;
                    }
                }
            }
            if(level==3){
                for(var k=0;k<level3.length;k++){
                    if(level3[k].tagName==TagName){
                        classArray[n]=level3[k];
                        n++;
                    }
                }
                return classArray;
            }
        }
    }
}

  写bool是觉得这种情况比较简单而且出现比较频繁,可以减少运行的时间

  调了一下午,classArray.length有时比实际的要大,最后发现是有的子节点为P标签或者A标签,里面有文字,文字会成为文本节点!这下记住了-||

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!