解决ie8不兼容getElementsByClassName

最新推荐文章于 2021-08-19 14:10:27 发布

转载最新推荐文章于 2021-08-19 14:10:27 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/6mlbl/p/5428672.html

文章标签：

#前端 #ViewUI

本文介绍了一个前端开发者解决IE8浏览器中getElementsByClassName兼容性问题的过程。通过自定义函数模拟实现了该方法，并解决了文本节点干扰的问题。

　　前端新人，第一篇博客，留给我调试的第一个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;
            }
        }
    }
}