javascript classList api

classList 获取class的集合

1 获取class

<p id="bad-joke" class="oh my giddy aunt">Two dogs are in the park. One says, "Nice day, isn't it?" The other says, "Holy crap, a talking dog!"</p>
<script>
    var joke = document.getElementById('bad-joke');
    console.log(joke.classList);
</script>
["oh", "my", "giddy", "aunt"]

2 classList的类型 object

 if(element.classList instanceof DOMTokenList){ return typeof element.classList;}

3 classList方法

  add()  list中添加 class

  remove() list中移除 class

  contains()list中是否包含某个 class

  toggle()list中toggle 一个class 有就移除，没有就添加。

 item() to 返回list中 class的位置

 toString() list转string

 length list的长度

 value list对象添加属性或方法

 

4 添加和移除多个class方法

add()

DOMTokenList.prototype.addmany = function(classes) {
    var classes = classes.split(' '),
        i = 0,
        ii = classes.length;

    for(i; i<ii; i++) {
        if(!this.contains(classes[i])) {
            this.add(classes[i]);
        }
    }
}

  remove()

DOMTokenList.prototype.removemany = function(classes) {
    var classes = classes.split(' '),
        i = 0,
        ii = classes.length;

    for(i; i<ii; i++) {
        if(this.contains(classes[i])) {
            this.remove(classes[i]);
        }
    }
}

classList.toggle()

根据是否存在在classList中，进行判断是添加还是删除，该方法包含两个参数：class 和 force, 如果force是true 则执行添加不执行移除，如果force是false 则执行移除不执行添加

button.addEventListener('click', function() {element.classList.toggle('is-visible'); }, false);

5 替换class的方法

element.classList.replace = function(classes) {
    var i = 0,
        ii = this.length,
        old_string = this.toString(),
        old_array = old_string.split(' '),
        new_array = classes.split(' '),
        j = 0,
        jj = new_array.length;

    // remove all the existing classes
    for(i; i<ii; i++) {
        this.remove(old_array[i]);
    }

    // add the new ones
    for(j; j<jj; j++) {
        this.add(new_array[j]);
    }
};

6 支持浏览器

Basic support at least has been in since Firefox 3.6, Opera 11.50, Chrome 8, and Safari 5.1.

 

 

出处 ：http://html5doctor.com/the-classlist-api/