h5的class操作
引言:
jquery操作类的基本操作:addclass、removeClass、toggleClass、hasClass
h5中也引申出来了类似的api，dom.classList方法可以获取到这个dom元素的类的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>utf-8</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id = "a" class = "cla1 cla2">
我是一个div而已
</div>
<script>
var dom = document.querySelector("#a");
console.log(dom.classList);
</script>
</body>
</html>
这是返回的一个对象，可以发现我们需要的类名都出现了。他是一个对象，有着很多方法。图上的方法就是类似于jquery的几个方法
var dom = document.querySelector("#a");
dom.classList.add('newClass');
//添加类newClass
dom.classList.remove('cla1');
//删除类cla1
dom.classList.contains('cla1');
//判断是否有这个类
dom.classList.toggle('toggle')
//如果没有这个类，就加上，有这个类，就去掉。
最后
在学习前端的过程中，虽然使用jquery可以让自己写代码非常舒服，但是在实际工作中，jquery可能显得有些笨重，需要多学习学习其他的方法来尽量替代掉jquery！