getElementsByClassName()方法封装

来源:互联网 发布:好看的手写字体知乎 编辑:程序博客网 时间:2024/05/21 04:40
最近学习了js中的getElementsByClassName()方法,该方法通过className来取得元素节点,但是此方法并不兼容非标准浏览器(ie9以下)。在非标准浏览器中是没有该方法的,所以要通过自己封装该方法来实现在非标准浏览器下的应用。
/********************************************函数名:getElementsByClassName()功能: 通过元素的className来获取元素,主要为了兼容非标准浏览器参数:parent: 传入查找元素的父级,在对应的父级中找相应元素        tagName:需要获取元素的标签    className: 传入的元素className返回值:返回包含有需要查找的className的元素*********************************************/function getElementsByClassName (parent,tagName,className) {    if (document.getElementsByClassName) {      //判断是否有该方法,有该方法直接返回调用        return getElementsByClassName(className);    } else {        var aEls=parent.getElementsByTagName(tagName);  //从父级中查找该元素的标签        var arr=[];        for (var i=0; i<aEls.length; i++){            var aClassName=aEls[i].className.split('');  //将获取的className拆分为数组,这么做即使一个标签中的class属性有多个值时也能查找得到            for (var j=0; j<aClassName.length; j++){    //将查询的className在拆分后的数组内进行查询                if (aClassName[j]==className){                    arr.push(aEls[i]);      //如果找到,将元素对象aEls[i]添加到空数组arr中                    break;      //找到一个后就跳出循环,防止有重名现象                }            }        }        return arr;     //返回arr数组    }}