浅谈HTML5-classList的api

前言：

   组内分享会上自己分享过，一直没有扔到博客里面，classList的api还是很有用的。

正文：

1、摘要：

  classList returns a token list of the class attribute of the element.

  返回的是元素的一个class 属性的标志的list

<div id="test" class="red  blue"></div>

• add         ----- 给元素添加一个指定的class

var test = document.getElementById('test');
test.classList.add('yellow');

• remove   ----- 从元素中删除一个指定的class

var test = document.getElementById('test');
test.classList.remove('red');

• toggle     ----如果元素没有指定的class则执行add操作|反之执行remove操作

var test = document.getElementById('test');
test.classList.toggle('yellow')

• contains  ----检测元素是否含有指定的class

var test = document.getElementById('test');
test.classList.contains('red');   //return true | false

2、浏览器支持情况

• Chrome 8+
• FF 3.6+
• Opera 11.50+
• Safari 5.1+

    其实比较下来对于支持classList的高级浏览器，还是预判断然后调用原生的api，当然对于不支持的还是沿用原来的那些操作类的api。

//判断的方式
var supportClassList = ("classList" in document.createElement("a"));

扩展阅读：

1、https://developer.mozilla.org/en/DOM/element.classList