根据原生JS封装函数，根据传递的选择器查找对应的元素以及解决getElementsByClassName() 兼容问题

功能：1..根据原生JS封装函数，根据传递的选择器查找对应的元素

   2.解决getElementsByClassName() 兼容问题

   3.查找 value 在 array 数组中第一次出现的位置

代码实现：

// 根据传递的选择器查找对应的元素
// 参数：
// selector: 选择器，字符串，可以取 #id 、.className、tagName
// context: 可选参数，表示元素查找的上下文环境，默认为 document
// 返回值：
// 根据对应选择器查找到的元素
function $(selector, context) {
// 当未传递 context 参数时，使用 document 作为默认值
context = context || document;


if ( selector.indexOf("#") === 0 ) // id
return document.getElementById(selector.slice(1));
if ( selector.indexOf(".") === 0 ) // class，调用解决兼容问题的方法
return getElementsByClassName(selector.slice(1), context);
// element
return context.getElementsByTagName(selector);
}


// 解决 getElementsByClassName() 兼容问题的函数
// 参数：
// className: 类名
// context: (可选参数)查询上下文环境
// 返回值：
// 返回满足条件的所有元素
function getElementsByClassName(className, context) {
context = context || document;
/* 支持使用 */
if (context.getElementsByClassName)
return context.getElementsByClassName(className);
/* 不支持使用，则遍历所有元素查找 */
// 存放所有查找到的元素的数组
var result = [];
// 先查找出上下文环境中所有后代元素
var elements = context.getElementsByTagName("*");
// 循环遍历查找到的每个元素
for ( var i = 0, len = elements.length; i < len; i++ ) {
// 获取当前遍历到元素的所有类名
var classNames = elements[i].className.split(" ");
// 判断在所有类名中是否存在函数参数className所表示的元素
if (inArray(className, classNames) !== -1)  // 存在
result.push(elements[i]); // 将当前遍历到元素添加到结果数组中
}


// 最后返回查找的结果
return result;
}


// 查找 value 在 array 数组中第一次出现的位置
// 解决 array.indexOf() 兼容问题
// 参数：
// array : 数组
// value : 待查找的值
// 返回值：
// value在array中的元素位置，找不到，返回-1
function inArray(value, array) {
if (Array.prototype.indexOf)  // 表示浏览器支持使用 indexOf() 方法
return array.indexOf(value);


// 不支持使用 indexOf() 方法
for (var i = 0, len = array.length; i < len; i++) {
if (array[i] === value)
return i;
}
return -1;
}