与类相关的扩充

HTML4在Web开发领域得到广泛采用后导致了一个很大的变化，即 class 属性用得越来越多，一方面可以通过它为元素添加样式，另一方面还可以用它表示元素的语义。于是，自然就有很多JavaScript代码会来操作CSS类，比如动态修改类或者搜索文档中具有给定类或给定的一组类的元素，等等。为了让开发人员适应并增加对 class 属性的新认识，HTML5新增了很多API，致力于简化CSS类的用法。

1. getElementsByClassName()方法

HTML5添加的 getElementsByClassName() 方法是最受人欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法。这个方法最早出现在JavaScript库中，是通过既有的DOM功能实现的（如下ADS.getElementsByClassName()方法定义代码所示），而原生的实现具有极大的性能优势。

<script type="text/javascript">
function getElementsByClassName(className, tag, parent){
	parent = parent || document;
	if(!(parent = $(parent))){return false;}

	//查找所有匹配的标签
	var allTags = (tag == "*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
	var matchingElements = new Array();

	//创建一个正则表达式。来判断className是否正确
	className = className.replace(/\-/g, "\\-");
	var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");

	var element;
	//检查每个元素
	for(var i=0; i<allTags.length; i++){
		element = allTags[i];
		if(regex.test(element.className)){
			matchingElements.push(element);
		}
	}
	//返回任何匹配的元素
	return matchingElements;
};
window["ADS"]["getElementsByClassName"] = getElementsByClassName;
</script>

新增的getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。来看下面的例子。

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

调用这个方法时，只有位于调用元素子树中的元素才会返回。在document对象上调用getElementsByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。

使用这个方法可以更方便地为带有某些类的元素添加事件处理程序，从而不必再局限于使用ID或标签名。不过别忘了，因为返回的对象是NodeList，所以使用这个方法与使用getElementsByTagName()以及其他返回NodeList的DOM方法都具有同样的性能问题。

支持getElementsByClassName()方法的浏览器有IE9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。