最近在仿照阴阳师官网首页来做练习（使用原生js），碰到了一些问题，如js中根据类名来获取元素。

因为document.getElementsByClassName有兼容性的问题，所以根据类名来获取元素一般都是自己写一个方法，以前一直用的方法是这样的：

/**
 * 
 * 作用：根据指定的类名查找元素
 * 
 * 参数：
 * @param  oParent：需要查找的元素的父级（对象），可以是document
 * @param  classname：需要查找的类名（字符串）
 * 
 * 函数内局部变量：
 * oChild  根据父级oParent获取到的该标签下的所有标签
 * arr     存储拥有需要查找的classname的元素
 * 
 * 实现步骤：
 * 1.获取父级oParent下的所有标签并存储到oChild中
 * 2.定义空数组arr
 * 3.对oChild进行循环，如果某个元素的类名与传入进来的
 *   类名一致，便将该元素添加到arr中
 * 4.循环完毕，将arr返回
 */
function getClass(oParent, classname){
    var oChild = oParent.getElementsByTagName('*');
    var arr = [];

    for(var i = 0, len = oChild.length; i < len; i ++){
        if(oChild[i].className == classname){
            arr.push(oChild[i]);
        }
    }
    return arr;
}

在做页面时，我在一个元素上设置了很多类名（例如：公共的类，私有类，鼠标经过时候的类），当我用这个getClass方法获取元素时，发生了问题。获取不到我想要的元素。

后来花了我大半天的时间，发现原来是：这种写法只能获取到只有一个类名时的元素，如果同时有很多个类，那么用这种方法就不行了。

后来，经过自己对该方法的改进，终于成功进化成为getClass究极形态：

/**
 * 
 * 作用：根据指定的类名查找元素
 * 
 * 参数：
 * @param  classname：需要查找的类名（字符串）
 * @param  oParent（可有可无）：需要查找的元素的父级（对象），如果没
 *         传入，默认为document；如果需要缩小范围，提高查找速度，可以
 *         给值（建议给）
 * 
 * 函数内局部变量：
 * oChild  根据父级oParent获取到的该标签下的所有标签
 * arr     存储拥有需要查找的classname的元素
 * 
 * 步骤：
 * 1.判断是否有传入oParent，如果没有传入，则赋予初始值document
 * 2.获取父级oParent下的所有标签并存储到oChild中
 * 3.定义空数组arr
 * 4.对oChild进行循环，利用字符串函数indexOf对每个元素的类名进行查找（
 *   类名可能不止一个），如果在类名中找到了传入进来的类名，便将拥有该类名
 *   的元素添加到arr中
 * 5.循环完毕，将arr返回
 */
function getClass(classname, oParent){

    if(!oParent){
        oParent = document;
    }

    var oChild = oParent.getElementsByTagName('*');
    var arr = [];

    for(var i = 0, len = oChild.length; i < len; i ++){
        // indexOf，在字符串中查找指定字符，如果查找到了，返回该字符
        // 在字符串中的索引；如果没有找到，返回-1
        // 索引有可能为0，所以大于等于0就意味着找到
        if(oChild[i].className.indexOf(classname) >= 0){
            arr.push(oChild[i]);
        }
    }
    return arr;
}