【兼容封装】classList的用法介绍和兼容IE8

前言

问题：我怎样可以使用原生js，而不使用element.addClass/removeClass("")给当前element添加class类名呢？

答案：可以使用js中的classList,他有几个可调用的方法 >>> add,remove,toggle,contains,replace,item,其中使用add/remve的方法就可以解决你的问题;

介绍用法

add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass )
用一个新类替换已有类。
item ( Number )
按集合中的索引返回类值。

小例子：

div.classList.add("foo"); //添加一个CSS 类
div.classList.add("foo","bar"); //添加多个CSS 类

var list = ["foo","bar"];
div.classList.remove("foo"); //移除一个CSS 类
div.classList.remove(...list); //移除数组list包含的css类

div.classList.toggle("head"); // 即如果类存在该css类，则删除它并返回false，如果不存在，则添加它并返回true

console.log(div.classList.contains("foo")); // 检查元素的类属性中是否存在指定的类值

div.classList.replace("candy", "bar"); // 用candy新类替换bar已有类。

存在的兼容性问题

IE浏览器兼容问题：

但是很可惜classList内的方法在IE10以下有些是不兼容的，但是我们可以做个兼容，目前只能兼容到ie8；

兼容性代码：

if (!("classList" in document.documentElement)) {
  Object.defineProperty(window.Element.prototype, 'classList', {
    get: function () {
      var self = this
 
      function update(fn) {
        return function () {
          var className = self.className.replace(/^\s+|\s+$/g, ''),
            valArr = arguments
 
          return fn(className, valArr)
        }
      }
 
      function add_rmv (className, valArr, tag) {
        for (var i in valArr) {
          if(typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')
          var temp = valArr[i]
          var flag = !!~className.search(new RegExp('(\\s+)?'+temp+'(\\s+)?'))
          if (tag === 1) {
            !flag ? className += ' ' + temp : ''
          } else if (tag === 2) {
            flag ? className = className.replace(new RegExp('(\\s+)?'+temp),'') : ''
          }
        }
        self.className = className
        return tag
      }
 
      return {
        add: update(function (className, valArr) {
          add_rmv(className, valArr, 1)
        }),
 
        remove: update(function (className, valArr) {
          add_rmv(className, valArr, 2)
        }),
 
        toggle: function (value) {
          if(typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")
          if (arguments.length === 1) {
            this.contains(value) ? this.remove(value) : this.add(value)
            return
          }
          !arguments[1] ? this.remove(value) : this.add(value)
        },
 
        contains: update(function (className, valArr) {
          if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")
          if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return false
          return !!~className.search(new RegExp(valArr[0]))
        }),
 
        item: function (index) {
          typeof index === 'string' ? index = parseInt(index) : ''
          if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")
          var claArr = self.className.replace(/^\s+|\s+$/, '').split(/\s+/)
          var len = claArr.length
          if (index < 0 || index >= len) return null
          return claArr[index]
        }
      }
    }
  })
}