原生JS封装函数以根据选择器查找元素，以及解决根据类名查找元素兼容问题（getElementsByClassName() 兼容问题）

因为在编写js代码时经常要用到

• document.getElementById(id);

• document.getElementsByClassName(classname);

• document.getElementsByTagName(tagname);

所以我们可以封装一个函数进行模拟相应功能，进而简化代码

首先封装函数$(selector,context)

其中参数selector是传选择器的字符串，可取代可取 #id .class element,
参数context是DOM查询上下文，即在该DOM元素后代查找满足选择器条件的元素，默认在 document 中查找，简单来说在这儿可以替代document
$函数代码如下：

/**
   * 根据选择器查找元素
   * @param selector  选择器，可取 #id   .class   element
   * @param context  查询上下文，即在该DOM元素后代查找满足选择器条件的元素，默认在 document 中查找
   * @return 返回查找到的元素（根据id查找时返回的是查找到的DOM对象，根据类名或元素名查找时，返回的是 HTMLCollection）
   */
function $(selector,context){
    // 如果未传递 context 参数，则默认取 document 值
    context = context||document;
    //通过判断selector字符串第一个字符来判别    #id   .class   element
    if(selector.charAt(0) === "#")//通过id查找
        return context.getElementById(selector.slice(1));
        //selector.slice(1)截取字符串除去第一个字符后面的字符串，如#id-->id
    if(selector.charAt(0) === ".")//通过classname查找
        return context.getElementsByClassName(selector.slice(1));
    else//元素名查找
        return context.getElementsByTagName(selector);
}

因为IE8及以下不支持document.getElementsByClassName()方法，所以以上函数还需修改调整以解决兼容问题

封装函数byClassName(classname,context)解决兼容问题

function byClassName(className, context) {
        // 默认在 document 文档中查找
        context = context || document;

        /* 支持使用 getElementsByClassName 方法，则直接使用 */
        if (context.getElementsByClassName)
            return context.getElementsByClassName(className);

        /* 不支持使用 getElementsByClassName 方法 */
        // 保存所有查找到元素的数组
        var _result = []; 
        // 将查询上下文后代中所有元素查找出来
        var _tags = context.getElementsByTagName("*");
        // 遍历迭代所有元素
        for (var i = 0, len = _tags.length; i < len; i++) {
                // 获取当前遍历到元素的所有类名
                var _classNames = _tags[i].className.split(" ");//将有多个类名同时存在时分割成新数组存入_classNames[] 数组中
                // 遍历所有类名
                for (var j = 0, l = _classNames.length; j < l; j++) {
                    if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
                        // 说明当前遍历到的元素是需要查找的元素之一
                        _result.push(_tags[i]);
                        break;
                    }
                }
        }

        // 返回所有查找到的结果
        return _result;
    }

将$()函数通过类名查找的代码部分进行修改

function $(selector,context){
    // 如果未传递 context 参数，则默认取 document 值
    context = context||document;

    if(selector.charAt(0) === "#")//id
        return context.getElementById(selector.slice(1));
    if(selector.charAt(0) === ".")//classname
        //调用byClassName()解决兼容
        return byClassName(selector.slice(1),context);
    else
        return context.getElementsByTagName(selector);
}

这样便可以直接调用$()函数查找元素啦，如下：

$(".box1")——>查找类名为“box1”的元素    
$("#box1")——>查找id为“box1”的元素
$("p")——>查找元素p标签
$(".box1",$("#box"))——>在id为“box”元素下查找元素类名为“box1”的元素

希望有帮助到正在奋斗的你