熟知且常用的兩種給DOM元素添加類的操作就是原生js中的 className和jQuery中的addClass院崇。
實際上classList已經(jīng)出現(xiàn)很久言疗，F(xiàn)irefox瀏覽器和Chrome瀏覽器都支持這個API玄妈；對于老油條IE蜓洪，就僅僅對IE10以上的版本才能支持贪磺。手機(jī)端的話拧略，發(fā)展至今，基本上除了老人機(jī)李破，一般都可以兼容宠哄。
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)!!!!
