js设置元素class方法小结及classList相关

    给DOM元素设置class是我们在项目中非常容易遇到的，网上的资料和总结也比较多，下面比较全面的整理一下，希望给到大家一些帮助！并引用两种成熟的classList的兼容方法

一、el.setAttribute('class','abc'); 

var div = document.getElementById('d1');
div.setAttribute("class", "abc");

兼容：IE8/9/10/Firefox/Safari/Chrome/Opera支持  IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

二、el.setAttribute('className', 'abc') 

var div = document.getElementById('d1');
div.setAttribute("className",
"abc");

兼容：IE6/7支持  IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。

三、el.className = 'abc'; 

var div = document.getElementById('d1');
div.className = 'abc';

兼容：所有浏览器都支持。

四、classList属性

HTML5新增的JavaScript API，HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。

1. add( class1, class2, ...)    在元素中添加一个或多个类名（如果指定的类名已存在，则不会添加）用法：`el.classList.add("a", "b", "c");`

2. remove( class1, class2, ...)    删除元素中一个或多个类名用法：el.classList.remove('a','b');          

3. toggle(class, true|false)    在元素中切换类名；参数1：要移出或者添加的类名；参数2：可选参数，不论类名是否存在，为true时强制添加类名，false时强制删除类名；用法： 添加：el.classList.toggle("d", true);删除：el.classList.toggle("d", false);           

4. contains( class )    判断指定的类名是否存在；用法：el.classList.contains("e") ，//如果e存在返回true 

5. item(index)    根据索引返回类名，索引从 0 开始，如果没有则返回null；用法：el.classList.item(0) //返回e

6. length属性 var len = document.body.classList.length;

兼容：支持classList属性的浏览器有Firefox 3.6+，ie10+和Chrome。IE9和IE9以前的版本不支持该属性，移动端方面，除了安卓2.3及以下版本的webview不支持，其它浏览器终端都能很好地支持。

最后，给不支持classList的浏览器（ie9及以下等）总结两种兼容解决方案：

第一种：

1. if (!("classList" in document.documentElement)) {
2. Object.defineProperty(HTMLElement.prototype, 'classList', {
3. get: function() {
4. var self = this;
5. function update(fn) {
6. return function(value) {
7. var classes = self.className.split(/\s+/g),
8. index = classes.indexOf(value);
9. fn(classes, index, value);
10. self.className = classes.join(" ");
11. }
12. }
13. return {
14. add: update(function(classes, index, value) {
15. if (!~index) classes.push(value);
16. }),
17. remove: update(function(classes, index) {
18. if (~index) classes.splice(index, 1);
19. }),
20. toggle: update(function(classes, index, value) {
21. if (~index)
22. classes.splice(index, 1);
23. else
24. classes.push(value);
25. }),
26. contains: function(value) {
27. return !!~self.className.split(/\s+/g).indexOf(value);
28. },
29. item: function(i) {
30. return self.className.split(/\s+/g)[i] || null;
31. }
32. };
33. }
34. });
35. }

第二种：从新写了方法，比前一种代码多点，原文出处

    var classList = null;
    (function(){
        classList = function (obj){
            this.obj = obj;
        };
        classList.prototype.add = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                this.obj.classList.add(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                this.obj.classList +=" "+arr.join(" ");
            }
        };
        classList.prototype.contains = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                return this.obj.classList.contains(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                var _className = this.obj.className;
                for(var i = 0,len= arr.length; i<len; i++){
                    if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))===-1){
                        return false;
                    }
                }
                return true;
            }
        };
        classList.prototype.remove = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                return this.obj.classList.remove(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                var _className = this.obj.className;
                for(var i = 0, len = arr.length;i<len; i++){
                    if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))!==-1){
                        _className =  _className.replace(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"),"");
                    }
                }
                this.obj.className = _className;
            }
        };
        classList.prototype.toggle = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.contains(value)){
                this.remove(value);
            }else{
                this.add(value);
            }
        };
    })();

ps：附上张鑫旭博客中关于classList的文章，让你理解的更透彻！HTML5 DOM元素类名相关操作API classList简介