属性的操作
预定义属性
<body>
<div id='test' class="zq zq1 zq2"></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
console.log(test.classList)
test.classList.add('zq3');
console.log(test.classList);
test.classList.remove('zq');
console.log(test.classList);
test.classList.toggle('zq');//如果存在就删除，不存在就添加
</script>
输出结果
自定义属性
<body>
<div id='test'name='info'></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
test.setAttribute('name','info1');
var h=test.getAttribute('name');
console.log(h);//info1
</script>
H5案例：
<body>
<div id='test' data-name='info' data-type-info='hehe'></div>
</body>
</html>
<script>
var test=document.querySelector("#test");
console.log(test.dataset.name);//info
// data-type-info：获取data-开头的属性名的属性值，
//后面的-的首字母大写
console.log(test.dataset.typeInfo);//hehe
</script>
H5可编辑属性
<body>
<div id='test' contenteditable="true">可编辑属性</div>
</body>
