html5为每一个元素新增了一个
classList对象，classList对象保存着控制当前元素类名的各个方法和属性。
Element.classList是一个只读属性，返回一个元素的类属性的实时 返回一个元素的类属性的实时DOMTokenList集合。
相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。
length返回类名的个数
add()在原有的类名基础上添加一个类名
remove()在原有的类名基础上 移出某一个类名
toggle()如果有这个类名 则删除这个类名，如果没有 则添加减去
item()根据索引 获取类名
contains()判断元素是否包含某一个类名
方法
add() 添加指定的类值（class value）。如果这些类已经存在于元素的属性中，那么它们将被忽略。
删除指定的类值。（注意： 即使删除不存在的类值也不会导致抛出异常。）
item( Number )：按集合中的索引返回类值。
toggle：当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回 false，如果不存在，则添加它并返回 true。当存在第二个参数时：若第二个参数的执行结果为 true，则添加指定的类值，若执行结果为 false，则删除它。
contains( String )：检查元素的类 class 属性中是否存在指定的类值。
replace( oldClass, newClass )：用一个新类值替换已有的类值。
示例
<button id="btn">按钮</button>
<div class="box">
<p id="con" class="con show">concon</p>
</div>
var oBtn = document.getElementById("btn");
var oCon = document.getElementById("con");
oBtn.onclick = function () {
// oCon.className = "red";
// console.log(oCon.className); //red
oCon.className = "con show red";
//这个red类已经存在于元素的属性中，那么它将被忽略
oCon.className += " red";
console.log(oCon.classList.length); //3
//在原有的类名基础上添加一个类名
//oCon.classList.add("red");
// 在原有的类名基础上 移出某一个类名
// oCon.classList.remove("con");
// 如果有这个类名 则删除这个类名，如果没有 则添加减去
//oCon.classList.toggle("blue");
// 判断元素是否包含某一个类名
//console.log(oCon.classList.contains("con"));
// 根据索引 获取类名
//console.log(oCon.classList.item(0)); //con
}
