目录
早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。
现在html5给所有元素增加了classList属性来操作类属性，非常方便。
1、classList属性
先看如下代码：
<ul class="nav">
<li class="active">栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
<script type="text/javascript">
// 获取到当前的li元素
let activeLi = document.querySelector(".active");
// 打印classList属性
console.log(activeLi.classList)
// 控制台输出：
// DOMTokenList ['active', value: 'active']
</script>
控制台查看效果：
classList属性类型：
classList属性是 DOMTokenList 类型，可以通过add、contains、remove等方法对类属性进行操作。
add(value)新增加一个类名。contains(value)是否包含类名。remove(value)删除类名。toggle(value)如果类名存在则删除，否则添加。
2、实务应用
实务中，栏目是切换是很常用的一个应用。接上面的例子，当点击栏目时 将 active 移动到对应的栏目
<ul class="nav">
<li class="item active">栏目1</li>
<li class="item">栏目2</li>
<li class="item">栏目3</li>
</ul>
<script type="text/javascript">
let currentElement = document.querySelector(".nav").firstElementChild;
// 遍历li元素设置点击事件
while (currentElement) {
currentElement.onclick = function() {
// 移除激活li的active
document.querySelector(".active").classList.remove("active");
// 当前li类增加active
this.classList.add("active");
}
currentElement = currentElement.nextElementSibling;
}
</script>
这样实现起来就很方便了，不用影响到其他类名。
