JavaScript 第11章 DOM扩展
11.3 HTML5
11.3.1与类相关的补充
1.getElementsByClassName()方法: HTML5添加的这个方法，是最受欢迎的一个方法，可以通过document对象及所有HTML元素调用该方法，这个方法接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList，传入多个类名时，类名的先后顺序不重要。
var allCurrentUsernames = document.getElementsByClassName("username current");
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
调用这个方法时，只有位于调用元素子树中的元素才会返回。在document对象上调用这个方法，会返回与这个类名匹配的所有元素，而在元素上调用这个方法只会返回后代元素中匹配的元素。
注意：
使用这个方法，可以更方便的为带有某些类的元素添加事件处理程序，从而不必再局限于使用ID或者是标签名，不过别忘了，因为返回的对象是NodeList，所以使用这个方法与使用getElementByTagName()以及其他返回NodeList的DOM方法都具有同样的性能问题。
兼容性：ie9以上
2.classList属性
在操作类名的时候，需要通过className属性去添加、删除和修改类名，因为className中是一个字符串，即使是只修改字符串的一部分，也每次都设置字符串的值，
例子：
<div class="bd user disabled">...</div>
这个<div>元素一共有三个类名。要从中删除一个类名，需要把这三个类名拆分开，删除不想要的那个，然后再将其他类名拼接成一个新的字符串。
//删除user类
//首先，取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删除的类名
var pos = -1,i,len;
for(i=0; len = classNames.length; i<len;i++){
if(className == " user "){
pos=i;
break;
}
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼接成字符串并重新设置
div.className = classNames.join(" ");
注意
html5新增了一种操作类名的方式，可以让操作变得比较简单起来，那就是为所有元素添加classList属性。这个属性时新集合类型DOMTokenList的实例，与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
add(value):将给定的字符串添加到列表中。如果值已经存在，就不添加了。
contains(value):表示列表中是否存在给定的值，如果存在就返回true，否则返回false。
remove(value): 从列表当中删除给定的字符串。
toggle(value): 如果列表中已经存在给定的值，删除它；反之添加它。
这样前面的那么多代码就可以用一行代码替换： div.classList.remove("user");
div.classList.add("add");
div.classList.remove("remove");
div.classList.toggle("toggle");
if(div.classList.contains("contains") && !div.classList.contains("disabled")){ 执行操作 }
作用：除非你要全部删除类名，或者全部替换类名，否则没必要使用className属性
兼容性： Firefox 3.6+和chrome
