封装元素获取函数

封装元素获取函数

目的：JS中获取id名，类名，标签名的元素往往使用：
document.getElementbyId("idName");
document.getElementsbyTagName("tagName");
document.getElementsbyClassName("className");

在这里注意到Element在id处使用单数，其他两处是复数。可以理解为id在文档中是唯一的，而tag和class是一类，一个数组集合。

为了简化代码，使用函数封装方式，而不用重复去输入相同的代码。封装在一个js文件内，通过外部引用，实现重复利用，提高效率。

在这里我们通过:

<div id="only" class="all box">

来说明函数的使用。

达到的效果：
document.getElementById("only")
$("#only")
无需再输入过长的代码。而使用简单的“$”来调用。

在这里我们需要注意到通过getElementById(),括号内的内容为“only”，而通过$()，括号内内容为“#only”。

函数一：元素获取函数

function $(selector, context) {
	//select : 查找元素的选择器，可以为 id、类、元素选择器。context : 查询上下文对象
	context = context || document;
	if (selector.indexOf("#") === 0) // id 查询
		return document.getElementById(selector.slice(1));
	if (selector.indexOf(".") === 0) // 根据类名查询
		return getElementsByClass(selector.slice(1), context);
	return context.getElementsByTagName(selector);
}

在这里selector.indexOf("#") === 0还可以用如下方法代替：

		selector.slice(0,1) === "#"
		selector.charAt(0) === "#"
		selector[0] === "#"
		selector.startsWidth("#")

在这里我们通过获取$("#only")来理解这个函数。
对应$(selector，context)，有：
selector =“#only”；
context = document ;

"#only"为一字符串，通过判断首字符是否为“#”号。返回
document.getElementById("only");
document.getElementById(selector.slice(1));
在这里selector.slice(1)表示截取字符串1号索引以后的字符串：

**“#only”**
	  01234
//01234表示每个字符在字符串中的索引

为什么这样表示呢？
之前提到，需要注意到通过getElementById(),括号内的内容为“only”，而通过$()，括号内内容为“#only”。
同理，可以去理解ClassName与TagName的调用获取。

$(".all")与$("div")

需要注意到的是在上一个函数中我们可以很好的获取到由id名或者标签名查找的元素。但是类名查找的元素在这里会遇到兼容问题。所以我们并不能直接使用getElementsByClassName（）的方式来获取，而是需要引入一个新的函数来解决这个兼容问题。我们在上一个函数中对判断为类名的元素返回了这样一个值：
return getElementsByClass(selector.slice(1),context);

getElementsByClassName() 在IE9以下存在兼容问题。

函数二：解决getElementsByClassName() 兼容问题

function getElementsByClass(className, context) {
	context = context || document;
	if (context.getElementsByClassName)  // 支持使用 getElementsByClassName() 方法 
		return context.getElementsByClassName(className);
	/* 不支持使用 getElementsByClassName() */
	// 保存查找到的元素的数组结构
	var result = [];
	// 在查找上下文中查询出所有元素
	var tags = context.getElementsByTagName("*");
	// 遍历每一个元素，判断是否存在查询的类名
	for(var i in tags){
		// 获取当前遍历到元素的所有类名
		var classNames = tags[i].className.split(" ");
		var index = inArray(className, classNames);
		if (index !== -1) // 当前遍历到的元素标签是要查找的标签
			result.push(tags[i]);
	}
	// 返回查找结果的数组
	return result;
}

注意到“*”号了吗？为什么输入它我们就能找到所有元素呢？还记得css中的通配符吗？那么我们就明白了，为什么它代表了所有元素。

在这里，我们考虑在不支持getElementsByClassName()方法时，如何获取拥有className的元素？
首先，元素的className属性是有效的。我们只要将问题转化为，在所有元素中找到带有className的元素，这个问题就可以解决。
换句话说，当我们找到className===“all”的就ok。还要注意到的是，如之前所讲，通过类名，标签名找到的元素，是一个集合，或者可以说是一个数组。另外，一个元素的className也可能不只有一个。

<div id="only" class="all box">

多个类名，我们通过空格来分隔。

我们把一个className看成数组中的一项，那么这个数组可以看成是classNames，在这个例子中
className==“all”
classNames["all","box]

而想要获得classNames这个数组，就需要将字符串

“all box“
//分割为"all"与"box"
className.split(" ")

以上我们即可得到一个含有我们查找的类名的数组。通过函数二我们解决了getElementsByClassName()的兼容问题--IE9以下版本不支持。

然而在classNames数组内我们找到该数组中某个className时将使用到的indexOf()同样存在着兼容问题--IE8以下并不支持。
所以我们需要再次引入一个函数来解决indexOf()的兼容问题。

函数三：indexOf()的兼容问题

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; // 未找到
}

这个函数很简单，在没有indexOf的情况下像以前一样遍历数组，即可得到。

通过以上三个函数我们实行了获取元素的目的，因为兼容问题，我们不得不使用其他函数来解决这些问题。

现在，我们将三个函数放在同一个js文件下，就可以在下个html中直接引用，而不需要使用get的方法。美元你值得拥有
$("#d"),
$(".class"),
$("<标签>")

在获取到元素后如何获取或者设置css属性？
一般的我们使用$().style,这个方法的操作只会在html标签上实现。而无法获取到

<style type="text/css"></style>

内的属性。

函数四：解决css属性获取的兼容问题

obj.currentStyle与window.getComputedStyle

function css(element, attr, value) {
	// 获取
	if (typeof attr === "string" && !value)
		return window.getComputedStyle 
				? getComputedStyle(element)[attr]
				: element.currentStyle[attr];
	// 设置CSS样式
	if (typeof attr === "string" && value)
		element.style[attr] = value; // 使用内联样式设置CSS
	else if (typeof attr === "object") {
		for (var prop in attr) {
			element.style[prop] = attr[prop];
		}
	}
}

这个函数也比较简单，在这里就不再解释。
手敲完真的很累了，如果上面有什么错误的地方，还请指出。