<style type="text/css">
.red{
background-color: #f00;
100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div01" class="div02"></div>
<div class="div02"></div>
<div class="div02" id="jia"></div>
<input type="text" id="inp" />
<script type="text/javascript">
var div01 = document.getElementById("div01");
console.log(div01)
var div02 = document.getElementsByClassName("div02") //对象，类数组（伪数组）
// 完全可以当成数组来使用
// 只有一个元素的时候也是类数组
console.error(div02[0])
var div03 = document.getElementsByTagName("div")
console.log(div03[0])
var all = document.getElementsByTagName("*"); //IE4
console.log(all)
// IE8
// w3c 制定一系列 开发规范
//
// div03[0].style.backgroundColor
// div03[0].style.width
// ...
// div03[0].className = "red div02 div03 div04"
// 下面这三个，都是可以获取和设置
// div03[0].innerHTML html片段
// innerText 文本
// div03[0].innerHTML = "hello world"
// div03[0].innerText = "<h1>hello world</h1>"
// value 适用于表单元素
document.getElementById("inp").value = "hello"
var inpvalue = document.getElementById("inp").value;
console.log(inpvalue)
</script>