熟知且常用的两种给DOM元素添加类的操作就是原生js中的 className和jQuery中的addClass。
实际上classList已经出现很久，Firefox浏览器和Chrome浏览器都支持这个API；对于老油条IE，就仅仅对IE10以上的版本才能支持。手机端的话，发展至今，基本上除了老人机，一般都可以兼容。
classList API概要
举个栗子：
<body class="a b c">
<script type="text/javascript">
console.log(document.body.classList);
</script>
</body>
浏览器控制台输出结果：
控制台输出结果
再看其直接暴露的API：
暴露的api
-
length属性，表示元素类名的个数。
-
item() 支持一个参数，为类名的索引，返回值为对应的类名，例如执行：
console.log(document.body.classList.item(0));则返回：
a
如若索引超出元素个数范围，例如：console.log(document.body.classList.item(3));则返回：
null -
add() 支持一个或多个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。例如：
<body class="a b c"> <script type="text/javascript"> console.log(document.body.classList.add('d')); console.log(document.body.classList); </script> </body>输出结果：
add()返回的是undefined
-
remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。例如：
<body class="a b c"> <script type="text/javascript"> console.log(document.body.classList.remove('b')); console.log(document.body.classList); </script>输出结果：
remove()返回的是undefined
-
toggle() 支持一个类名字符串参数。若类名列表中有此类名，移除之，并返回
false; 如果没有，则添加该类名，并返回true。
还有等等等等等就不逐一介绍了。
注：忘了说了，原本add() 只支持添加一个类名字符串参数，但是经过时代的变迁，add()如今可以支持添加多个类名字符串。例如：
<body class="a b c">
<script type="text/javascript">
document.body.classList.add('d','e','f');
console.log(document.body.classList);
</script>
</body>
输出结果：
当!当!!当!!!当!!!!
网友评论