H5新增标签classList的基本用法及总结

JS里新增了一个专门操作类的属性叫classList 能够让我们添加一个类、删除一个类、切换一个类没那么麻烦了.

classList 是一个伪数组,它名字里面虽然也带着数组两个字,但是跟数组没有关系,也不能够调用数组的方法.
它可以获取到所有的类，每个类都是一个数组的一个元素, 从取值的角度就比以前className要方便.

它的用法也很简单,也很方便.

第一种:添加类

	//添加类
	     // 添加一个类
        box.classList.add("red");
        //它这个用法也很简单,就是在你想要操作的的盒子后面直接点出classList这个属性然后再使用add方法即可

第二种:添加多个类

	//添加多个类
	 box.classList.add("red","green");
	 //classList还有一个方便之处就是可以直接添加多个类名,只需要在后面加上逗号再写上类名即可

第三种:删除一个类

	//删除一个类
	box.classList.remove("red");
	//用法就是调用remove方法然后传入你要删除的那个类即可

第四种:删除多个类

	//删除多个类
	box.classList.remove("red","green");
	//删除多个类的用法跟添加多个类的用处是一样的,传入你所要删除的那个类中间用逗号隔开

第五种:切换一个类

	//切换一个类
	box.classList.toggle('red');
	//:意思就是说如果你没有这个类的话我就给你加上,如果有的话就去掉

第六种:判断是否有一个类

	//判断是否有这个类
	box.classList.contains('red');
	//判断是否有某个类，如果有返回true，如果没有返回false

以上就是classList标签的用法,很好用,但由于是H5新增的标签,所以会有一些兼容性的问题,如果要兼容低版本的浏览器的话就只能用class来操作类,下面这张图可以看到classList各个浏览器版本的兼容性

下面再分享一个可以查询各种属性浏览器版本兼容性的网站
can i use 在这个网站可以查询到各个属性的浏览器的兼容性,这样子再用一些新属性的时候先去查一下浏览器是否兼容再去用,就可以省去很多不必要的麻烦