熟知且常用的兩種給DOM元素添加類的操作就是原生js中的 className和jQuery中的addClass。
實際上classList已經(jīng)出現(xiàn)很久，F(xiàn)irefox瀏覽器和Chrome瀏覽器都支持這個API；對于老油條IE，就僅僅對IE10以上的版本才能支持。手機端的話，發(fā)展至今，基本上除了老人機，一般都可以兼容。
classList API概要
舉個栗子：
<body class="a b c">
<script type="text/javascript">
console.log(document.body.classList);
</script>
</body>
瀏覽器控制臺輸出結(jié)果：
控制臺輸出結(jié)果
再看其直接暴露的API：
暴露的api
length屬性，表示元素類名的個數(shù)。
-
item() 支持一個參數(shù)，為類名的索引，返回值為對應(yīng)的類名，例如執(zhí)行：
console.log(document.body.classList.item(0));則返回：
a
如若索引超出元素個數(shù)范圍，例如：console.log(document.body.classList.item(3));則返回：
null -
add() 支持一個或多個類名字符串參數(shù)。表示往類名列表中新增一個類名；如果之前類名存在，則添加忽略。例如：
<body class="a b c"> <script type="text/javascript"> console.log(document.body.classList.add('d')); console.log(document.body.classList); </script> </body>輸出結(jié)果：
add()返回的是undefined -
remove() 支持一個類名字符串參數(shù)。表示往類名列表中移除該類名。例如：
<body class="a b c"> <script type="text/javascript"> console.log(document.body.classList.remove('b')); console.log(document.body.classList); </script>輸出結(jié)果：
remove()返回的是undefined toggle() 支持一個類名字符串參數(shù)。若類名列表中有此類名，移除之，并返回
false; 如果沒有，則添加該類名，并返回true。
還有等等等等等就不逐一介紹了。
注：忘了說了，原本add() 只支持添加一個類名字符串參數(shù)，但是經(jīng)過時代的變遷，add()如今可以支持添加多個類名字符串。例如：
<body class="a b c">
<script type="text/javascript">
document.body.classList.add('d','e','f');
console.log(document.body.classList);
</script>
</body>
輸出結(jié)果：
當(dāng)!當(dāng)!!當(dāng)!!!當(dāng)!!!!
