DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
1.DOM（Document Object Moduel）:文档对象模型
定义了访问和操作HTML文档的标准法，把HTML文档呈现为带有元素，属性和文本的树结构，由节点组成
解析过程：HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。
2.事件（JS是以事件为核心的一门语言）
三要素：事件源，事件，事件驱动程序
书写步骤：
获取事件源：document.getElementById(“box”）
绑定事件：事件源box.事件onclick = function(){事件驱动程序}
书写事件驱动程序：关于DOM的操作
代码：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
常用事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击
3.DOM节点的获取（事件源）
//通过id获取单个标签 var div1 = document.getElementById("box1"); //通过标签名获取标签数组 var arr1 = document.getElementsByTagName("div2"); //通过类名获取标签数组 var arr2 = document.getElementByClassName('');
4.绑定事件
直接绑定你匿名函数
<div id="box1"> </div>
<script type="text/javascript">
//通过id获取单个标签
var div1 = document.getElementById("box1");
div1.onclick = function(){
alert(66666666);
}
</script>
先单独定义函数，再绑定
<div id="box1"> </div>
<script type="text/javascript">
//通过id获取单个标签
var div1 = document.getElementById("box1");
//注意这里是fn，没有括号啊,它代表的是整个函数。fn()代表的是返回值
div1.onclick = fn;
div1.onclick = fn(){
alert(66666666);
}
</script>
行内绑定
<!-- 这里是fn()，因为绑定的这段代码不是写在js代码里面的，而是被识别成了字符串 -->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript" >
function fn() {
alert(66666)
}
</script>
5.事件驱动程序
例：我们通过鼠标点击使的图片改变大小和颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var div1 = document.getElementById("box");
//点击鼠标时，原本粉色的div变大了，背景变红了
div1.onclick = function () {
div1.style.width = "200px"; //属性值要写引号
div1.style.height = "200px";
div1.style.backgroundColor = "blue"; //属性名是backgroundColor，不是background-Color
}
</script>
</body>
</html>
onload事件： 页面加载文本图片完毕的时候会触发该事件
使用场景：如果希望页面加载完立刻执行，则可以使用该事件属性
例
window.onload = function(){ console.log('6666666'); } //等页面加载完毕打印该字符串
window.onload的使用方法：
js的加载和html是同步加载的，因此使用元素在定义元素之前就很容易报错。这个时候我们可以把使用元素的代码放在onload里面，这样就能保证这段代码最后执行
例：京东顶部广告栏关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
/*定义右上角的x*/
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closeBanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
window.onload = function(){
// /1.获取事件源和相关元素
var closeBanner = document.getElementById('closeBanner');
var topBanner = document.getElementById('topBanner');
//2.绑定事件
closeBanner.onclick = function(){
//3.书写事件驱动程序
//类控制
//topBanner.className += ' hide';//保留原类名，添加新类名
// topBanner.className = 'hide';
//替换旧类名
topBanner.style.display = 'none';
}
}
</script>
</body>
</html>
鼠标悬停在img时，更换成另一张图片，移开鼠标，恢复原来图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
//这里cursor：pointer表示鼠标放图片那里，会出现一个小手
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>