在操作类名时，需要通过className属性添加、删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。HTML5新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。

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

有了classList属性，除非你需要全部删除所有类名，或者完全重写元素的class属性，否则也就用不到className属性了。支持classList属性的浏览器有Firefox 3.6和Chrome。

<script type="text/javascript">
if(!String.trim){String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"");}}
function getClassNames(element){return element.className.trim().split(/\s+/);}
function hasClassName(element,className){
  if(element.classList){
    return element.classList.contains(className);
  }else{
    var classes=getClassNames(element);
    for(var i=0;i<classes.length;i++){if(classes[i]===className){return true;}}
    return false;
  }
}
function addClassName(element,className){
  if(hasClassName(element,className))return false;
  element.className+=(element.className ? " ":"")+className;
  return true;
}
function removeClassName(element,className){
  if(element.classList){
    element.classList.remove(className);
  }else{
    var classes=getClassNames(element);
    var length=classes.length;
    for(var i=length-1;i>=0;i--){if(classes[i]===className){delete(classes[i]);}}
    element.className=classes.join(" ");
    return (length==classes.length ? false : true);
  }
}
</script>