话说 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