HTML5与类有关的扩充

对于传统HTML而言，HTML5是一个叛逆。全部以前的版本对JavaScript接口的描述都不过三言两语，主要篇幅都用于定义标记，与JavaScript相关的内容一律交由DOM规范去定义。

而HTML5规范则围绕如何使用新增标记定义了大量JavaScript API。其中一些API与DOM重叠，定义了浏览器应该支持的DOM扩展。

与类相关的扩充

HTML4在Web开发领域获得普遍采用后致使了一个很大的变化，即 class 属性用得愈来愈多，一方面能够经过它为元素添加样式，另外一方面还能够用它表示元素的语义。因而，天然就有不少JavaScript代码会来操做CSS类，好比动态修改类或者搜索文档中具备给定类或给定的一组类的元素，等等。为了让开发人员适应并增长对class 属性的新认识，HTML5新增了不少API，致力于简化CSS类的用法。

1. getElementsByClassName() 方法

HTML5添加的 getElementsByClassName() 方法是最受人欢迎的一个方法，能够经过document 对象及全部HTML元素调用该方法。这个方法最先出如今JavaScript库中，是经过既有的DOM功能实现的，而原生的实现具备极大的性能优点。

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() 方法的浏览器有IE 9+、Firefox 3+、Safari 3.1+、Chrome和Opera 9.5+。

1. classList 属性

在操做类名时，须要经过 className 属性添加、删除和替换类名。由于 className 中是一个字符串，因此即便只修改字符串一部分，也必须每次都设置整个字符串的值。好比，如下面的HTML代码为例。

<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 (classNames[i] == “user”){
        pos = i;
        break;
    }
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并从新设置
div.className = classNames.join(“ ”);

为了从 <div> 元素的 class 属性中删除 “user” ，以上这些代码都是必需的。必须得经过相似的算法替换类名并确认元素中是否包含该类名。添加类名能够经过拼接字符串完成，但必需要经过检测肯定不会屡次添加相同的类名。不少JavaScript库都实现了这个方法，以简化这些操做。

HTML5新增了一种操做类名的方式，可让操做更简单也更安全，那就是为全部元素添加 classList 属性。这个 classList 属性是新集合类型 DOMTokenList 的实例。与其余DOM集合相似， DOMTokenList 有一个表示本身包含多少元素的 length 属性，而要取得每一个元素可使用 item() 方法，也可使用方括号语法。此外，这个新类型还定义以下方法。

• add(value) ：将给定的字符串值添加到列表中。若是值已经存在，就不添加了。
• contains(value) ：表示列表中是否存在给定的值，若是存在则返回 true ，不然返回 false 。
• remove(value) ：从列表中删除给定的字符串。
• toggle(value) ：若是列表中已经存在给定的值，删除它；若是列表中没有给定的值，添加它。

这样，前面那么多行代码用下面这一行代码就能够代替了：

div.classList.remove(“user”);

以上代码可以确保其余类名不受这次修改的影响。其余方法也能极大地减小相似基本操做的复杂性，以下面的例子所示。

//删除“disabled”类
div.classList.remove(“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+和Chrome。

连接