2.md

HTML5中与类相关的扩充classList

话说 classList

与其他DOM属性类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素，可以使用item()方法。 此外这个新类型还定义了其他方法：

• add：为元素添加一个新的类名
• contains：判断元素是否包含一个类名，如果包含，返回true
• remove：为元素移除一个类名
• toggle：如果元素有这个类名，就移除这个类名，没有这个类名，就添加这个类名

举例说明

html 结构

<div class='div div1 div2'>div</div>

javascript结构

 var div = document.querySelector('div');

// item() 
console.log(div.classList.item(0)); // div
console.log(div.classList.item(1)); // div1

// add() 
div.classList.add('div3');
console.log(div.classList.item(3)); // div3

// remove() 
div.classList.remove('div3');
console.log(div.classList.item(3)); // null

// contains() 
console.log(div.classList.contains('div')); // true

// toggle() 
div.classList.toggle('div');
console.log(div.classList.contains('div')); // false
div.classList.toggle('div');
console.log(div.classList.contains('div')); // true

扩展

• 张鑫旭的这篇文章： HTML5 DOM元素类名相关操作API classList简介
• MDN官方的介绍： https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList