HTML5_与类相关的扩展

<span style="white-space:pre">			</span>/*
				1、getElementsByClassName()方法。
				HTML5添加的getElementByClassName()的方法是最受欢迎的一个方法，可以通过document
				对象及所有的HTML元素调用该方法。这个方法最早出现在javaScript库中，是通过既有
				DOM功能实现的，而原生的实现有极大的性能优势。
					getElementsByClassName()方法接收一个参数，即一个包含一或者多个类名的字符串，
				返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。来看看
				下面的列子。
			*/	   
			
			//取得所有类中包含“userName”和“current”的元素，类名的先后顺序无所谓
			var allCurrentUserName = document.getElementByClassName("userename current");
			//取得ID为“myDiv”的元素中带有类名“selected”的所有元素
			var selected = document.getElementsById("myDiv").getElementsByClassName("selected");
			
			/*
			调用这个方法时，只有位于调用元素子树中的元素才会返回。在document对象上调用
			getElementsByClassName()始终会返回与类名匹配的所有元素，在元素中调用该方法就只会
			返回后代元素中匹配的元素。
				使用这个方法可以更方便地带有某些类的元素添加事件处理程序，从而不必在局限于使用
			ID或标签名。不过别忘了，因为返回的对象是NodeList，所以使用这个方法与使用
			getElementsByTagName()以及其他返回NodeList的DOM都具有同样的性能问题。
				支持getElementsByClassName()方法的浏览器有IE9+、Firefox 3+、Safari 3.1+、Chrome
			和Oprea 9.5+。
			
			2.classList属性
			在操作类名时，需要className属性添加、删除和替换类名。因为className中的一个字符串、
			所以只修改字符串的一部分，也必须每次都设置整个字符串的值。比如，以下面的HTML代码
			为例。
			<div class = "bd user disabled"></div>
			这个div元素一共三个类名。要从中删除一个类名，需要把这三个类名拆开、删除不想要的那个，
			然后再把其他类名拼成一个新的字符串。请看下面例子。
			*/
			//删除“user”类
			//首先、取得类名字符串并拆分成数组
			var className = div.className.split(/\s+/);
			//找到要删除的类名
			var pos = -1;
				i,
				len;
			for(i = 0,len = classNames.length ; i < len; i++){
				if(className[i] == "user"){
					pos = i;
					break;
				}
			}
			
			//删除类名
			classNames.splice(i,1);
			//把剩下的类名拼成字符串并重置
			div.className = className.join(" ");
			
			/*
			为了从<div>元素的class属性中删除“user”，以上代码都是必须的。必须通过类似的算法替换
			类名并确认元素是否包含该类名。添加类名可以通过拼接字符串完成。但是必须检测确定不会
			多次添加相同的类名。很多javaScript库都实现了这个方法，以简化这些操作。
				HTML5新增了一种操作的类名的方式，可以让操作更加简单更加安全，那就为所有的元素添
			加classList属性。这个classList属性是新集合类型DOMTokeList的实例。与其他DOM集合类似。
			DOMTokeList有一个表示自己包含多少个元素的length属性，而要取得每一个元素可以使用item()
			方法，也可以使用方括号语法。此外这个新类型还定义如下方法。
			add(value):将给定的字符串添加到列表中。如果值已经存在，就不添加了。
			contains(value):表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
			remove(value):从列表删除给定的值。
			toggle(value):如果列表中存就删除该值，如果不存在则添加该值。
			下面是这些方法使用的例子：0
			*/
			//删除“disabled”类
			div.classList.romove("disabled");
			//添加“current”类
			div.classList.add("current");
			//切换“user”类
			div.classList.toggle("user");
			//确定元素是否包含既定的类名
			if(div.classList.contains("bd") && !div.classList.contains("disabled")){
				//执行操作
			}
			
			//迭代类名
			for(var i = 0,len = div.classList.length; i<len; i++){
				doSomething(div.classList[i]);
			}
			/*
			有了classList属性，除非你需要全部删除所有的类名，或者完全重写元素的class属性，
			否则也就用不到className属性了。
				支持classList属性的浏览器有了Firefox 3.6+和Chrom。
			*/