js實現addClass方法，classList與className有什么區別？

 壹 ❀ 引

Jquery中addClass與removeClass是兩個使用高頻的方法，對於為dom元素增刪class類非常方便；但如果不用JQ，使用js怎么模擬它們呢？本文主要記錄下自己的實現思路。

 貳 ❀ 從classList屬性入手

我們隨便獲取一個dom對象，打印出它的對象屬性，可以看到管理class類的主要有classList屬性與className屬性，我們先從classList屬性下手。

1.classList屬性

classList屬性的值為DOMTokenList對象，關於DOMTokenList官方解釋是一組空格分隔的標記，與Array一樣具有length屬性，且索引從0開始，但無法使用Array對象的方法。

不過DOMTokenList對象內置了add，remove，contains等方法，用於增刪改查等操作；所以我們可以使用add，remove像JQ中addClass與removeClass方法一樣操作class類。

let div = document.querySelector('div');
div.classList.add("newClass");
div.classList.remove("newClass");

2.classList兼容問題

我們發現這兩個方法用的很爽啊，跟JQ一樣，一個方法解決class類的操作，但比較遺憾的是，這兩個方法均存在兼容問題：

雖然其它瀏覽器兼容性良好，但鐵打的IE從9之前完全不支持classList屬性，從版本10開始支持該屬性，但不支持add與remove方法。

所以說如果要兼容IE，此做法不可取，但如果不用考慮IE，那就真的能像JQ一樣使用便捷了。

 叄 ❀ 從className屬性入手

1.className與classList的區別

 說完classList屬性，我們再考慮從className下手；className屬性與classList屬性同為Dom屬性且都管理class類的值，不同的是classList屬性值為特殊的DOMTokenList對象，而className屬性的值為普通的字符串。

我們嘗試自定義一個有class類的元素，分別獲取兩者的值：

<div class="demo1 demo2"></div>

2.用js模擬實現

那要從className屬性入手來操作class類，無非就是字符串的拼接截取操作了，這里就直接附上代碼：

//自定義添加class方法
function addClass(ele, name) {
    if (name) {
        //判斷該dom有沒有class，有則在原class基礎上增加，無則直接賦值
        ele.className ? ele.className = ele.className + " " + name : ele.className = name;
    } else {
        throw new Error("請傳遞一個有效的class類名");
    };
};

//自定義刪除class類方法
function removeClass(ele, name) {
    //將className屬性轉為數組
    let classArr = ele.className.split(" "),
        index = classArr.indexOf(name);
    //將符合條件的class類刪除
    index > -1 ? classArr.splice(index, 1) : null;
    ele.className = classArr.join(" ");
};

let div = document.querySelector('div');
//測試調用
addClass(div, 'demo1');
removeClass(div, 'demo1');

我在網上也看了下別人的方案，對於removeClass，我這里使用的是轉成數組后利用splice刪除傳遞的class類后，再轉成字符串賦給className屬性，可能有點繁瑣。其他人的方案大部分是通過正則匹配替換，再去掉多余空格，但是我的正則是真的挺爛...

本文只是作為一個簡單思路記憶，畢竟我第一點確實想到用classList去做操作，而且天真的以為classList是一個類數組，結果失敗了..

那么就記錄到這里了！