今天无意中发现了一个非常好用的api--classList，来介绍一下
先看一个官方解释
Element.classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合。
什么意思呢，其实就是获取元素的className，但是返回的是元素所有class组成的数组，例
var $content = document.querySelector('.main-content')
console.log($content.classList) // DOMTokenList ["main-content", value: "main-content"]与className不同的在于，className属性返回以空格分割的class组成的字符串，而classList返回一个类数组对象。看一段代码
var $content = document.querySelector('.main-content')
$content.className; // 'main-contnet'
console.log($content.classList) // DOMTokenList ["main-content", value: "main-content"]那么classList有哪些好处呢，它提供以下方法，方便操作
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。 当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass )
用一个新类替换已有类。
在jquery 一统天下的时代，元素class操作是很方便的，比如
// 添加className
$el.addClass('className')
// 删除className
$el.removeClass('className')但是当jquery逐渐退出历史舞台，很多时候就需要一些原生的js，这时像classList相比className就方便很多。
最后再关注一下classList的浏览器支持情况
可以看到IE是兼容到10，如果在不考虑IE的情况下，还是可以用的。而ClassName是IE6就开始支持，所以要兼容IE低版本，className属性是为首选。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList
