前言
关于classList的学习总结，作为DOMTokenList对象该属性用于在元素中添加、移出、切换css类，使用classList可以实现十分多的功能，十分的有用，以下是我的学习笔记。
语法：elem.classList
方法：
add( String[,String])：添加指定的类值。如果这些类已经存在于元素的属性中，那么他们将被忽略
remove(String[,String])：删除指定的类值item(Number)：按集合中的索引返回类值
toggle(String[,force])：
- 当只有一个参数的时，切换class value ，即如果类存在，删除它，并返回false，如果类不存在，则添加它并返回true。
- 当存在第二个参数时，如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains(string)：检查元素的类属性中是否存在指定的类值
属性：
length：返回类列表中类的数量，该属性是只读的
下面是利用classList实现标签栏切换的一个小例子：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80<style>
div {
width: 500px;
margin: 10px;
}
.db{
height: 50px;
width: 300px;
margin: 0 auto;
border: none;
}
.dh{
background: #666;
height: 25px;
width: 300px;
margin: 0 auto;
color: white;
text-align: center;
border: none;
}
.dhd{
margin: 0 0px;
width: 100px;
float: left;
margin-top: 3px;
}
.dbd{
width: 100px;
height: 50px;
float: left;
margin: 0 0px;
display: none;
width: 300px;
}
.current{
display: block;
background: white;
color: black;
}
.ttt{
border: 1px solid black;
width: 300px;
}
</style>
<body>
<div class="ttt">
<div class='dh'>
<div class="dhd current">标签栏一</div>
<div class="dhd">标签栏二</div>
<div class="dhd">标签栏三</div>
</div>
<div class='db'>
<div class="dbd current">这是内容一</div>
<div class="dbd">这是内容二</div>
<div class="dbd">这是内容三</div>
</div>
</div>
<script>
// 利用classList的方法给当前元素添加样式让其显示，其他元素默认不显示，以达到切换效果
var hs=document.getElementsByClassName('dhd');
var ds=document.getElementsByClassName('dbd');
for(var i=0;i<hs.length;i++){
hs[i].onmouseover=function(){
for(var i=0;i<ds.length;i++){
if(hs[i]==this){
ds[i].classList.add('current');
hs[i].classList.add('current');
}
else{
ds[i].classList.remove('current');
hs[i].classList.remove('current');
}
}
}
}
</script>
</body>