className 與 classList 的差別 / setAttribute和add的差別

className 與 classList 的差別

1，所有浏覽器都支援className屬性

classList是HTML5新增，對IE浏覽器并不友好，IE10+與其他主流浏覽器支援此屬性。

2，className屬性傳回值是一個字元串，内容就是HTML元素的class屬性内容。

classList屬性傳回一個包含指定元素所有樣式類的集合對象。

3，.className的傳回值就是包含元素class屬性值的字元串。

.classList傳回值是DOMTokenList類型集合，通過此集合可以非常便利的操作元素class屬性。

通過className操作class屬性，本質是對字元串的操作，比如判斷class是否具有樣式類"b"。

那麼需要自己寫代碼，将傳回的字元串分解為各個樣式類，然後再進行判斷，相對比較麻煩。

如果利用classList屬性，那麼将是非常輕松愉快的事情，使用DOMTokenList集合的contains方法即可實作。

利用classList傳回的集合對象，隻需要一個contains方法即可。

集合還具有其他方法，分别如下：

（1）.add()：添加樣式類。

（2）.item()：傳回指定索引的樣式類。

（3）.remove()：删除指定樣式類。

（4）.toggle()：切換樣式類

setAttribute和add的差別

setAttribute用于建立或改變某個新屬性。

如果指定屬性已經存在,則隻設定該值并且會替換原來的值。

add方法是添加某個類，不會替換屬性中的值，并且需要跟classList使用，因為它是classList的方法。