原生js解决document.getElementsByClassName兼容问题

       在新手使用原生JavaScript时，常常会用到document.getElementById、document.getElementsByClassName以及document.getElementsByTagName等方式来获取到元素，进而对其进行操作。但IE9以下的版本却不支持document.getElementsByClassName方法，所以很多刚开始接触js的同学往往会很困惑这个问题。这里封装了一下三种方法的的函数，使其都能完美使用三种方法，希望能对大家有所帮助。

这里使用的$符号作为函数名。同时在传递参数时，第二个参数可以不写。

// 可以根据 id、class、element 查找元素 
// param (字符串) : #id    .class    tag
// obj : 父元素

//首先判断通过哪种方式获取元素
function $(param, obj) { // #box
	obj = obj || document; // 没有传递 obj 参数，则默认使用 document
	if (param.charAt(0) === "#") // 通过id名获取元素
		return document.getElementById(param.slice(1));//这里的slice是字符串的一个函数，用于获取第2个元素及之后的字符串
	if (param.indexOf(".") === 0) //通过class名获取元素
		return getByClass(param.slice(1), obj);//调用下面的getClass函数

	return obj.getElementsByTagName(param); // tag
}

// 如何解决 getElementsByClassName 兼容问题
function getByClass(className, obj) {
	obj = obj || document;

	//如果浏览器支持此方法就直接调用
	if (obj.getElementsByClassName) // 支持 getElementsByClassName 方法的使用
		return obj.getElementsByClassName(className);
	/* 不支持 getElementsByClassName 方法的使用 */
	// 保存所有查找到的元素的数组结构
	var result = []; 
	// 查找出 obj 对象后代所有元素
	var tags = obj.getElementsByTagName("*");
	// 遍历每个元素
	for (var i = 0, len = tags.length; i < len; i++) {
		// 获取到当前遍历元素所使用的所有类名
		var classNames = tags[i].className.split(" ");
		// 遍历当前元素的每个类名
		for (var j = 0, l = classNames.length; j < l; j++) {
			if ( classNames[j] === className ) { // 说明当前遍历到的元素使用过要查找的类名
				result.push(tags[i]);
				break;
			}
		}
	}

	// 返回结果集
	return result;
}

下面的函数在确定浏览器不支持document.getElementsByClassName方法后，将传进来的父元素的子元素添加到一个数组中，之后对其进行遍历，将其元素的类名通过空格拆分（即split方法），最后对类名进行判断，将包含所需类名的元素名通过push（）保存到数组result中，最后返回result。