class属性を操作する新しいAPI-classList

操作classはフロントエンド開発でよく使われるもので、特に分業が細かい会社では.classはほとんどJSエンジニアとページビルダーの橋渡しです.ほとんどのポピュラーライブラリではclassプロパティ操作のいくつかの方法が提供されています.addClass/removeClass/toggleClass/hasClassのように.
 
HTML 5では、IE(IE 9/10を含む)を除いてclassList APIが提供され、他の現代ブラウザではこの属性がサポートされています.classプロパティモジュールを書き換えました.
 

domClass = function() {
    
    // IE6-10    
    // Safari5/Chrome8/Firefox3.6/Opera11.5        
    var supportClassList = function() {
        var div = document.createElement('div');
        div.className = 'a';
        return !!div.classList;
    }();
    
    var hasClass, addClass, removeClass, toggleClass, replaceClass;
    
    function check(el, cls) {
        if (el.nodeType !== 1 || typeof cls !== 'string') {
            return false;
        }
        return true;
    }
    
    if(supportClassList) {
        hasClass = function(el, cls) {
            if( check(el, cls) )
                return el.classList.contains(cls);
            else
                return false;
        };
        addClass = function(el, cls) {
            var i = 0, c;
            if( check(el, cls) ) {
                cls = cls.split(' ');
                while( c = cls[i++] ) {
                    el.classList.add(c);
                }
            }
        };
        removeClass = function(el, cls) {
            var i = 0, c;
            if( check(el, cls) ) {
                cls = cls.split(' ');
                while( c = cls[i++] ) {
                    el.classList.remove(c);
                }
            }
        };
        toggleClass = function(el, cls) {
            if( check(el, cls) ) {
                el.classList.toggle(cls);
            }
        };
    }
    else {
        hasClass = function(el, cls) {
            if( check(el, cls) )
                return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') != -1;
            else
                return false
        };
        addClass = function(el, cls) {
            if( check(el, cls) && !hasClass(el, cls) ) {
                el.className += (el.className ? " " : "") + cls;;
            }
        };
        
        removeClass = function(el, cls) {
            if( check(el, cls) ) {
                el.className = el.className.replace(RegExp("\\b" + cls + "\\b", "g"), "");
            }
        };
        toggleClass = function(el, cls) {
            hasClass(el, cls) ? removeClass(el, cls) : addClass(el, cls);
        };
    }

    replaceClass = function(el, oldCls, newCls) {
        removeClass(el, oldCls);
        addClass(el, newCls);
    };
    
    return {
        has : hasClass,
        add : addClass,
        remove : removeClass,
        toggle : toggleClass,
        replace : replaceClass
    };
    
}();

 
 
関連:
https://developer.mozilla.org/en/DOM/element.classList
http://davidwalsh.name/classlist
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist