classList属性在IE9及IE8上的兼容性处理

最近开发遇到IE8和IE9中classList的兼容性问题，在网上查找后发现许多解决方案都存在一定的小问题，现贴出正确的解决方案：

这是网上找到的解决方案：

if (!("classList" in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        index = classes.indexOf(value);
 
                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }
 
            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),
 
                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),
 
                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),
 
                contains: function(value) {
                    return !!~self.className.split(/\s+/g).indexOf(value);
                },
 
                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                }
            };
        }
    });
}

主要存在以下问题：

1，第二行中 Object.defineProperty(HTMLElement.prototype, 'classList',  

HTMLElement在IE8中不兼容，故替换为window.Element

2,indexOf在IE8中不兼容，需要自己实现该方法，因本项目中使用到jQuery,故使用jQuery中的inArray(value,arr)方法。

自己实现如下，就是在调用indexOf前判断下：

//添加数组IndexOf方法
if (!Array.prototype.indexOf){
  Array.prototype.indexOf = function(elt /*, from*/){
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++){
      if (from in this && this[from] === elt)
        return from;
    }
    return -1;
  };
}

3，因Object.defineProperty()方法是IE8之后才有的，故此方法只适用IE8及以上，IE8以下的兼容需另外处理。

优化后完整版代码如下，使用前引入即可：

if (!("classList" in document.documentElement)) {
    Object.defineProperty(window.Element.prototype, 'classList', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/\s+/g),
                        //index = classes.indexOf(value);
                        index = jQuery.inArray(value,classes);
 
                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }
 
            return {
                add: update(function(classes, index, value) {
                    if (!~index) classes.push(value);
                }),
 
                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),
 
                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),
 
                contains: function(value) {
                    //return !!~self.className.split(/\s+/g).indexOf(value);
                    return !!~jQuery.inArray(value,self.className.split(/\s+/g));
                },
 
                item: function(i) {
                    return self.className.split(/\s+/g)[i] || null;
                }
            };
        }
    });
}