H5中的class操作(classList)

h5的class操作

引言:

​ jquery操作类的基本操作:addclassremoveClasstoggleClasshasClass

​ h5中也引申出来了类似的api,dom.classList方法可以获取到这个dom元素的类的对象


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>utf-8title>

	<link rel="stylesheet" href="./css/index.css">
head>
<body>
	
我是一个div而已 div> <script> var dom = document.querySelector("#a"); console.log(dom.classList); script> body> html>

H5中的class操作(classList)_第1张图片

这是返回的一个对象,可以发现我们需要的类名都出现了。他是一个对象,有着很多方法。图上的方法就是类似于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!

你可能感兴趣的:(个人总结,H5)