使用原生js来操作对象dom的class属性

之前一直都使用jquery来操作dom，今天想自己用原生写一些插件，却发现给dom增删class的时候，使用slice来截取className特别的麻烦，后来发现，原来原生JS本来就有提供api来对dom的class进行增删，下面的对象就是用来对dom进行增删class的。

Element.classList

点击查看classlist的api

html:

<div class="container">
	
</div>
<button class="change">
	切换
</button>

css:

.container{
	width:100px;
	height:100px;
	border:5px solid darkgrey;
	background:red;
	display:inline-block;
}
.blue{
	background-color:blue;
}

js:

var btn = document.querySelectorAll(".change")[0];
var container = document.querySelectorAll(".container")[0];
btn.addEventListener('click',function(){
	container.classList.toggle("blue");
});