操作class属性的新API--classList
操作class是前端开发中经常需要用到的，尤其在分工细的公司。class几乎是JS工程师与页面构建师的桥梁。几乎所有的流行库都提供了class属性操作的几个方法。如?addClass/removeClass/toggleClass/hasClass。
?
现在HTML5提供了classList?API，除了IE（包括IE9/10），其它现代浏览器均支持该属性。重写了下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