<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
<style>
.box {
width:200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
// 直接修改、添加、删除元素的标准属性，能够直观的在html元素的属性看见修改效果。
// 不是标准属性则无法直观的看见效果。
// box.className = "abc";
// box.id = "abc";
// box.abc = "666"
// 通过 setAttribute 修改、添加 元素的标准属性或者是非标准属性，都能够直观的在html元素的属性看见效果
box.setAttribute("ooo", "aaa");
box.setAttribute("title", "is ok");
</script>
</body>
</html>