HTML5新特性:元素的classList屬性與應用

在html5新增的classList之前， 操作元素的class用的是className這個屬性，而如果要向jquery封裝的hasClass, removeClass, addClass, toggleClass一樣優雅的操作calssName, 在以前我們要對className封裝處理，如下， 下面的代碼你未必能看得懂運行流程，但應該能看懂功能部分，這幾段函數是取自我錄製的一套視頻中，講解DOM框架封裝的一部分

gQuery.prototype.hasClass = function (obj, cName) {
    // <div class="abc"> <div class="hello abc def"></div> <div class="hello def abc"></div>
    return obj.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'));
}
gQuery.prototype.addClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (!this.hasClass(this.elements[i], cName)) {
            // hello abc   // abc
            this.elements[i].className += " " + cName;
            this.elements[i].className = this.trim(this.elements[i].className);
        }
    }
    return this;
}
gQuery.prototype.removeClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (this.hasClass(this.elements[i], cName)) {
            var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');
            this.elements[i].className = this.elements[i].className.replace(re, " ");
            this.elements[i].className = this.trim(this.elements[i].className);
        }
    }
    return this;
}
gQuery.prototype.toggleClass = function (cName) {
    for (var i = 0; i < this.elements.length; i++) {
        if (this.hasClass(this.elements[i], cName)) {
            this.removeClass(cName);
        } else {
            this.addClass(cName);
        }
    }
    return this;
}

這裏，我還寫了一個獨立的刪除某個class的功能:

<div class="box1 box2 box3">this is a test string</div>
    <input type="button" value="移除某個class">
    <script>
        var oDiv = document.querySelector("div"),
            classNames = '',
            oBtn = document.querySelector("input");
        oBtn.onclick = function(){
            classNames = oDiv.className.split(/\s+/);
            var pos = -1, i, len;
            for( i = 0, len = classNames.length; i < len; i++ ) {
                if( classNames[i] == 'box2' ) {
                    pos = i;
                    break;
                }
            }
            classNames.splice( i, 1 );
            oDiv.className = classNames.join( " " );
        }

    </script>

思路非常的簡單，獲取div元素中的所有class, 用split 按空格切割，就會得到[box1,box2,box3]這樣的數組， 然後遍歷判斷，是否有box2這個class？

找到之後就把當前數組的索引記下來，最後再用splice把該class從數組刪除得到[box1,box3] 然後把數組的每一項用join函數中的空格連接，再賦值

給元素的className.

而在html5中，每個元素都有classList這個屬性， classList是一個類數組結構, 提供了4個操作class的方法: add,remove,toggle,contains,

看到這幾個英文單詞，你已經知道什麼意思了吧，尤其對於使用過jquery的朋友

add( 添加class),   remove( 刪除class), toggle( 切換class) contains( 判斷是否包含某個class )

<div id="box" class="box1 box2 box3">this is a test string</div>
    <input type="button" value="添加class" id="btn-add">
    <input type="button" value="移除class" id="btn-remove">
    <input type="button" value="切換class" id="btn-toggle">
    <script>
        var G = function (id) { return document.querySelector(id); }
        var oBtnAdd = G('#btn-add'),
            oBtnRemove = G('#btn-remove'),
            oBtnToggle = G('#btn-toggle'),
            oBox = G('#box');
        oBtnAdd.onclick = function(){
            oBox.classList.add( 'box4' );
        }
        oBtnRemove.onclick = function(){
            if( oBox.classList.contains('box1') ) {
                oBox.classList.remove( 'box1' );
            }
        }
        oBtnToggle.onclick = function(){
            oBox.classList.toggle( 'box4' );
        }
    </script>