楔子
最近在看JavaScript高程設計果善，越看越覺得JS真的博大精深郁季，每讀一次都會有新的收獲戴质。今天我們就來說一說classList這個API。
前言
JS操作元素類名的API最熟悉的莫過于className式撼，常規(guī)用法如下
<div id=“box1”></div>
<script>
var box1 = document.getElementById("box1");
box1.onclick = function(){
this.className = "warn";
}
<script>
相信類似這樣的寫法大家肯定很常見童社，但是className的弊端很明顯，假如元素有多個類名著隆，我想要移除其中一個怎么辦扰楼？
<div class="box warn noBorder" id="box1"></div>
如果我想移除.box類呀癣，如何寫？簡單
<script>
box1.className = "warn noBorder";
</script>
事實上弦赖，復雜的地方在于很多時候你并不知道元素真正類名有多少项栏，而且也不可能每次都手寫這么多類名組成的字符串。
當然你也可以通過以下代碼部署：
var className = box1.className.split(/\s+/);//將className字符串分割成數(shù)組
var pos = -1,
len = className.length;
for(var i = 0;i < len;i++){
if(className[i] === "warn"){
pos = i;
}
}
className.splice(i,1);//從數(shù)組中移除該項
box1.className = className.join(" ");//將數(shù)組轉換成字符串
很麻煩是不是腾节？還好JQ封裝了2個方法忘嫉，addClass()和removeClass()。利用這2個方法案腺，你可以直接給元素添加/移除類名庆冕，這也可以看出JQ流行的原因。
但是為了這么個簡單的問題你要我引入JQ庫劈榨？ok访递，豬腳登場。
classList
classList,簡單來說同辣，就是為了增加/切換/移除 class類新增的API拷姿。返回的是元素的類名。本質上是DOMTokenList.
關于DOMTokenList
這里引用 mozilla MDN上的一段話：
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.
翻譯過來就是：
DOMTokenList這種類型表示一組空間分隔的標記旱函。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList或HTMLAreaElement.relList返回响巢。從0開始的類JavaScript數(shù)組索引。DOMTokenList始終是區(qū)分大小寫的棒妨。
也就是說 classList relList都屬于DOMTokenList.
兼容性
來看下classList的兼容性踪古。
這里需要說明下，IE10也是兼容classList的券腔，只不過同IE11一樣伏穆，add/remove方法不支持多參數(shù)處理。默認只會處理第一個參數(shù)
屬性
- length屬性
返回的是元素類名的長度纷纫，只讀 - value屬性
返回元素類名的字符串形式
方法
- add()
添加類名枕扫，支持多個類名添加。IE10/IE11不支持多參數(shù)
box1.classList.add("warn","error","tips");
- remove()
移除類名辱魁，支持多個類名移除烟瞧。IE10/IE11不支持多參數(shù)
box1.classList.remove("box","warn","noBorder");
contains()
參數(shù)為字符串，如果元素有該類名返回true,沒有則返回falsetoggle()
類名切換染簇，如果原來有該類名則移除参滴；如果沒有則添加。
簡單應用
一個div元素剖笙，點擊添加某樣式卵洗，再點擊移除該樣式。
var Odiv = document.getElementById("box1");
Odiv.onclick = function(){
this.classList.toggle("styleName");
}
好了，classList介紹到這过蹂，滾去看紅皮書咯十绑。
