77.DOM
1.DOM：Document Object Model （文档对象模型）
2.DOM作用：
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。
也有人称DOM是对HTML以及XML的标准编程接口。
（DOM不能操作CSS，任何不能操作CSS，这个不能改变指的是，不能改变CSS样式表，但是可以通过间接的方式改变htm行间样式去改变它）
XML：可以自定义标签，之前都是用XML但是现在已经被js中的就是json所取代
例1：
var div = document.getElementsByTagName('div')[0];
//document.getElementsByTagName('div') 就可以将所有div选出来封装进一个类数组里，所有div按照类数组索引位进行排序，所以 例题中的[0]代表取出类数组中第一个div
//选出来的 div叫做dom对象，对象能做的增删改查，这个div都能做。
例2：
var div = document.getElementsByTagName('div')[0];
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "pink";
//网页上就会出现100px长宽的粉色的区域
例3：
var div = document.getElementsByTagName('div')[0];
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "pink";
div.onclick = function (){
this.style.backgroundColor = "red";
this.style.height = "200px";
this.style.width = "200px";
this.style.borderRadius = "50%";
}
//接着上道题，点击后就变红了而且宽高等属性也会改变，函数里的this指的就是谁调用它this就指向谁。borderRadius属性代表变为圆角。
例4：实现一直点击。两个颜色之间来回切换
var div = document.getElementsByTagName('div')[0];
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "pink";
var count = 0;
div.onclick = function (){
count ++;
if(count % 2 == 0){
this.style.backgroundColor = "pink";
}
else{
this.style.backgroundColor = "red";
}
}
//点一下变红，点一下变粉，再点再变红等等
例5：选项卡功能，点击哪个按钮，按钮颜色改变，及对应的div框内的内容进行改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
<style type = text/css>
.content{
border : 2px solid red;
height: 200px;
width : 200px;
display : none;
}
.active{
background-color : pink;
}
</style>
</head>
<body>
<button class = "active">111</button>
<button>222</button>
<button>333</button>
<div class="content" style = "display : block">111</div>
<div class="content">222</div>
<div class="content">333</div>
<script type="text/javascript">
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0 ; i < btn.length; i++){
(function (n){ //因为在这里会产生闭包现象所以利用立即执行函数解决。
btn[n].onclick = function (){
for(var j = 0 ; j < btn.length;j ++){
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active"
div[n].style.display = "block";
}
}(i))
}
</script>
</body>
</html>
例6：小方块移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<script type="text/javascript">
var div = document.createElement('div'); /*利用js创建div标签*/
document.body.appendChild(div); /*向body里面插入一个div标签*/
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "pink";
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
var speed = 1;
var timer = setInterval(function (){ /*每隔后面那个数毫秒就执行一遍函数*/
speed += speed/20;
div.style.left = parseInt(div.style.left) + speed + "px";
div.style.top = parseInt(div.style.top) + speed + "px";
if(parseInt(div.style.top)> 200 &&parseInt(div.style.left)> 200){
clearInterval(timer);
}
},10)
</script>
</body>
</html>
例7：用键盘上的上下左右键控制小方块的移动方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frame</title>
</head>
<body>
<script type="text/javascript">
var div = document.createElement('div'); /*利用js创建div标签*/
document.body.appendChild(div); /*向body里面插入一个div标签*/
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "pink";
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
document.onkeydown= function (e){ /*当点击时，系统会帮咱们调用这个函数，调用的时候会传进一个事件对象进来
这个事件对象会包裹着所有的事件发生的时候产生的所有信息，以供咱们使用
就像这个事件发生的时候鼠标在哪，或者键盘点了什么东西都会包含
console.log(e); 键盘按上是38，下是40，左是37 */
switch(e.which){
case 38:
div.style.top = parseInt(div.style.top) - 5 + "px"; /*电脑的坐标系是反着的 y轴朝下为正*/
break;
case 40:
div.style.top = parseInt(div.style.top) + 5 + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - 5 + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + 5 + "px";
break;
}
}
</script>