js的classname和setattribute都可以给一个dom元素设置class属性吧,

属性 *** 作两种方式:

1. obj.xxx    俗称点 *** 作，比如: obj.className = 'red'

2. obj.setAttribute(name,value)  比如: obj.setAttribute('class','red')

却别在于:

.  *** 作不能 *** 作自定义属性

attribute可以

对于这里的class *** 作，其实是没什么区别的，建议用className，或者用H5里面提供的

classList *** 作class

classList属性返回元素的类名，它是一个DOMTokenList对象。相比较className来说，它的 *** 作更加简洁，类似于对数组的 *** 作。

通过控制台，我们可以看到，DOM元素的classList是一个DomTokenList对象，结构 类似 于数组：

不过classList在IE10以下，并不能支持classList。因此，来看看如何自己实现一个classList。

首先，我们知道 div，span等html标签，有一个共同的父类，就是HTMLElement

我们要在它上面，创建一个新的prototype。

首先我们想到了直接定义：

但是这样会有个问题，就是通过prototype定义属性，属性的值是共享的。因此当我们给myDiv的newClassList.push的时候，也改变了mySpan，这显然不符合我们的要求。

因此，我们可以采用Object.defineProperty这个方法，来实现，给我们的HTMLElement定义属性。

为什么要把这个属性变成类数组呢？是因为我们既要让它拥有数组的特性，也要可以有自己的方法，就是add(),remove(),toggle(),contains()...

接下来我们，写一个构造器。

然后我们再在构造器里添加方法，因为prototype定义的方法是共享的，所以在这里可以使用。

我们给构造器里创建了几个 *** 作类数组的方法，因为这个实例是类数组对象，所以我们可以直接通过[].join.call(this," ")[].push.call(this,class)调用数组的方法。

那么我们现在可以直接使用 myDiv.neCLassList.add("classB") 等方法了，但是这样仅仅是改变了这个属性的value,如何通知并改变DOM的classname呢？

很简单，我们在构造器里监听一下。

至此，我们就完成了classList的构造，要修改dom的class，直接使用myDiv.newClassList.add('classB')。。。就可以实现。

---