1.基本概念
DOM: Document 整篇文档 Object 文档对象 Model 模型 这里有个Dom树
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。
下边通过一些具体的代码来看一下：
1.需求：实现按键控制div的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键控制div颜色</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="bt1">变成蓝色</button>
<script>
var bt1=document.getElementById("bt1")
bt1.onclick=function(){
var box=document.getElementById("box");
box.style.backgroundColor="blue";
//.style控制元素的样式，不过加的是行内样式。也只能获取到行内样式。
}
</script>
</body>
</html>
注意：.style控制元素的样式，不过加的是行内样式，也只能获取到行内样式。
2.按键控制div的颜色-进阶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title按键控制div的颜色></title>
<style>
#box{
width: 330px;
height: 330px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<button>红色</button>
<button>橙色</button>
<button>黄色</button>
<button>绿色</button>
<button>蓝色</button>
<button>黑色</button>
<button>紫色</button>
<script>
//找到页面中所有的button按钮放入一个数组中
var bts=document.getElementsByTagName("button");
//创建一个颜色数组一一对应；
var Colors=["red","orange","yellow","green","blue","black","purple"];
//给所有的button按钮分发点击事件
for(var n=0;n<bts.length;n++){
bts[n].index=n;//给每个button标签分发一个位置属性（给个序号）
bts[n].onclick=function(){//需要知道当前点击的是第几个按钮
var box=document.getElementById("box");
box.style.backgroundColor=Colors[this.index]
console.log(n);
}
}
</script>
</body>
</html>
3.如何在js中查找元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何在js中查找元素</title>
</head>
<body>
<ul id="nav1">
<li>Song Dingfei</li>
<li>Song Dingfei</li>
<li>Song Dingfei</li>
</ul>
<ul id="nav2">
<li>宋顶飞</li>
<li>宋顶飞</li>
<li>宋顶飞</li>
</ul>
<ul>
<li class="a0">嗨嗨</li>
<li class="a0">嗨嗨</li>
</ul>
<script>
//需求：当点击每个li时，都弹出框输出“你好”，alert("你好")
//1.document.getElemrntById("")，通过ID属性找到指定元素
//2.document.getElementsByTagName("") 或者 对象.getElementByTagName(""),
//这是通过标签名获取一组数据，并且把数据内容放入数组中，
//3.document.getElementsByClassName("类名") 通过类名获取一组数据，
并且把数据内容放入数组中，
//如果可以使用标签名，就不要使用类名。
function getId(id){
var x=document.getElementById(id);
return x;
}
function getTagName(TagName){
var y=document.getElementsByTagName(TagName);
return y;
}
var nav1=getId("nav1");
var Lis1=getTagName("li");
var nav2=getId("nav2");
var Lis2=getTagName("li");
var Lis3=document.getElementsByClassName("a0");
// 通过循环依次拿出数组中的li，给其分发事件，
for(var n=0;n<Lis1.length;n++){
Lis1[n].onclick=function(){
alert("你好");
}
}
for(var j=0;j<Lis2.length;j++){
Lis2[j].onclick=function(){
alert("大家好");
}
}
for(var i=0;i<Lis3.length;i++){
Lis3[i].onclick=function(){
alert("你们好");
}
}
</script>
</body>
</html>
（1）. document.getElemrntById("")，通过ID属性找到指定元素
（2）. document.getElementsByTagName("") 或者 object(象).getElementByTagName("")，这是通过标签名获取一组数据，并且把数据内容放入数组中，
（3）.document.getElementsByClassName("类名") 通过类名获取一组数据，并且把数据内容放入数组中，
注意：如果可以使用标签名，就不要使用类名。
4.this对象的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this对象的使用</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<ul id="nav">
<li>sdf1</li>
<li>sdf2</li>
<li>sdf3</li>
</ul>
<script>
function getId(id){
return document.getElementById(id);
}
function getTagName(TagName){
return document.getElementsByTagName(TagName);
}
// var box=getId("box");
// box.onclick=function(){
// this.style.backgroundColor="blue";
// }
// 需求：当点击每个li时背景色依次变成粉色
var nav=getId("nav");
var navLis=nav.getElementsByTagName("li");
console.log(navLis.length);
//利用循环给所有li添加事件，当函数触发的时候，分发函数早已经分发完成了
for(var n=0;n<navLis.length;n++){
navLis[n].onclick=function(){
console.log(n);
console.log(this);
//在事件编程中，有一个this对象，谁触发的函数，this就指向谁。
this.style.backgroundColor="pink"
}
}
</script>
</body>
</html>
5.class的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class</title>
<style>
.box{
width: 150px;
height: 150px;
background-color: red;
margin-bottom: 10px;
}
.active{
background-color: blue;
}
</style>
</head>
<body>
<div class="box active"></div><!-- 一个元素可以有多个类名,每个类名之间用空格隔开 -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
//需求：当点击div时，被点击的div颜色变成蓝色，其他的div还原成默认样式
//排他思想：先找到所有元素，设置成默认， 然后再找到指定的元素加上对应的属性；
var divs=document.getElementsByClassName("box");
for(var n=0;n<divs.length;n++){
divs[n].onclick=function(){
// console.log(14)
for(var j=0;j<divs.length;j++){
divs[j].className="box";//先将所有的div的class名称 都设置成box
}//设置完成以后，再将指定的div都设置成选中样式
this.className="box active";//如何在js中更改class名称 .className
}
}
</script>
</body>
</html>
tab选项卡1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tap选项卡</title>
<style>
*{
padding: 0;
margin: 0;
}
#tabNav{
overflow: hidden;/*清除子集浮动对其的影响*/
}
#tabNav li{
list-style-type: none;
width: 100px;
height: 40px;
float: left;
border:1px solid #ccc;
text-align: center;
line-height: 40px;
}
#tabNav .active{
background-color: red;
}
#wrap{
width: 406px;
border:1px solid #ccc;
height: 200px;
}
#wrap div{
width: 406px;
height: 200px;
display: none;
}
#wrap .show{
display: block;
}
</style>
</head>
<body>
<ul id="tabNav">
<li class="active">话费</li>
<li>旅行</li>
<li>车险</li>
<li>游戏</li>
</ul>
<div id="wrap">
<div class="show">话费</div>
<div>旅行</div>
<div>车险</div>
<div>游戏</div>
</div>
<script>
//需求：点击指定li时，li变成选中样式，其他li恢复默认，让其对应的div标签显示出来，
其他的div标签隐藏，
//1.点击谁，谁变红，
//2.显示出相应的div
//事件编程：1.事件源 2.事件 3.事件处理函数
//第一步，通过id先找到所有li的父级元素
var tabNav=document.getElementById("tabNav");
//第二步，通过父级元素找到所有子集的li，并且放入数组中，
var tabNavLis=tabNav.getElementsByTagName("li");
//找到所有的div元素，并且放入数组中，
var wrap=document.getElementById("wrap");
var wrapDivs=wrap.getElementsByTagName("div");
//第三步，利用循环添加数组，给每个元素添加事件，
for(var n=0;n<tabNavLis.length;n++){
tabNavLis[n].index=n;
tabNavLis[n].onclick=function(){
//利用排他思想，先将所有的li类名清空，
for(var j=0;j<tabNavLis.length;j++){
tabNavLis[j].className="";
}
this.className="active";
//console.log(this.index);
for(var i=0;i<wrapDivs.length;i++){
wrapDivs[i].className="";
}
wrapDivs[this.index].className="show";
}
}
</script>
</body>
</html>
事件编程：1.事件源 2.事件 3.事件处理函数
tab选项卡2-淘宝网
1.划分布局（先判断是否需要利用定位属性）
2.完成逻辑阶段 首先找到对应的事件源元素，给其分发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡加强版</title>
<style>
*{
padding: 0;
margin: 0;
}
#wrap{
position: relative;
}
#tabnav{
margin-top: 20px;
margin-left: 80px;
}
#tabnav li{
list-style-type: none;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#tabnav .active{
background-color: pink;
}
#wrap #box{
position: absolute;
top: 0;
left: 230px;
display: none;
}
#wrap #box div{
width: 180px;
height: 252px;
line-height: 252px;
text-align: center;
color: blue;
background-color: purple;
font-size: 20px;
border: 1px solid #ccc;
float: left;
display: none;
}
#wrap #box .show{
display: block;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="tabnav">
<li>女装/男装/内衣</li>
<li>鞋靴/箱包/配件</li>
<li>童装玩具/孕产/用品</li>
<li>家电/数码/相机</li>
<li>美妆/洗护/保健品</li>
</ul>
<div id="box">
<div>女装/男装/内衣</div>
<div>鞋靴/箱包/配件</div>
<div>童装玩具/孕产/用品</div>
<div>家电/数码/相机</div>
<div>美妆/洗护/保健品</div>
</div>
<script>
var tabnav=document.getElementById("tabnav");
var tabnavLis=tabnav.getElementsByTagName("li");
var box=document.getElementById("box");
var boxLis=box.getElementsByTagName("div");
//注意：1.鼠标进入时，不仅需要控制对应div的显示和隐藏，还需要控制其容器父级的显示隐藏，
//2.当鼠标里离开导航时，所有的状态还原成默认（所有li都变成未选中，div容器隐藏）
//3.如果鼠标在对应div时，容器就一直显示，然后对应的li加上选中的样式，
//4.当鼠标离开内容区域容器时，所有样式还原成默认，
for(var n=0;n<tabnavLis.length;n++){
tabnavLis[n].index=n;
tabnavLis[n].onmouseenter=function(){
for(var j=0;j<tabnavLis.length;j++){
tabnavLis[j].className="";
boxLis[j].className="";
}
this.className="active";
box.style.display="block";
boxLis[this.index].className="show"
}
}
//当鼠标移出整体导航条时，需要再次将box显示区域隐藏，并且将所有的li还原成默认样式，
//.onmouseleave鼠标移出事件
tabnav.onmouseleave=function(){
for(var j=0;j<tabnavLis.length;j++){
tabnavLis[j].className="";
box.style.display="none";//并将box隐藏
}
}
//如果鼠标在对应的div上时，div还是显示的，并且对应的li是选中样式，
for(var n=0;n<boxLis.length;n++){
boxLis[n].index=n;
boxLis[n].onmouseenter=function(){
box.style.display="block";
//只要鼠标在div上，其内容区就永远显示
tabnavLis[this.index].className="active";
}
}
//当鼠标移出box区域，还原成默认状态；
box.onmouseleave=function(){
for(var j=0;j<tabnavLis.length;j++){
tabnavLis[j].className="";
box.style.display="none";//并将box隐藏
}
}
</script>
</div>
</body>
</html>
tab选项卡的封装
<style>
*{
padding: 0;
margin: 0;
}
#tabNav{
margin-left: 50px;
margin-top: 30px;
overflow: hidden;
}
#tabNav li{
list-style-type: none;
width: 100px;
height: 40px;
border: 1px solid #ccc;
line-height: 40px;
text-align: center;
float: left;
}
#tabNav .active{
background-color: red;
}
#tabWrap div{
width: 406px;
height: 300px;
font-size: 20px;
color: red;
text-align: center;
line-height: 300px;
border: 1px solid #ccc;
margin-left: 50px;
display: none;
}
#tabWrap .show{
background-color: pink;
display: block;
}
#picNav{
margin-left: 50px;
overflow: hidden;
}
#picNav li{
list-style-type: none;
width: 100px;
height: 40px;
border: 1px solid #ccc;
line-height: 40px;
text-align: center;
float: left;
}
#picNav .active{
background-color: red;
}
#picWrap div{
width: 406px;
height: 300px;
font-size: 20px;
color: red;
text-align: center;
line-height: 300px;
border: 1px solid #ccc;
margin-left: 50px;
display: none;
}
#picWrap .show{
background-color: pink;
display: block;
}
</style>
</head>
<body>
<ul id="tabNav">
<li class="active">话费</li>
<li>游戏</li>
<li>车险</li>
<li>充值</li>
</ul>
<div id="tabWrap">
<div class="show">话费板块</div>
<div>游戏板块</div>
<div>车险板块</div>
<div>充值板块</div>
</div>
<ul id="picNav">
<li class="active">话费</li>
<li>游戏</li>
<li>车险</li>
<li>充值</li>
</ul>
<div id="picWrap">
<div class="show">话费板块</div>
<div>游戏板块</div>
<div>车险板块</div>
<div>充值板块</div>
</div>
<script>
//相同功能的选项卡进行封装
function tab(nav,box){
var tabNav=document.getElementById(nav);
var tabNavLis=tabNav.getElementsByTagName("li");
var tabWrap=document.getElementById(box);
var tabWrapDivs=tabWrap.getElementsByTagName("div");
if (tabNavLis.length!=tabWrapDivs.length) throw "li的个数必须和div的个数保持一致";
for(var n=0;n<tabNavLis.length;n++){
tabNavLis[n].index=n;
tabNavLis[n].onmouseenter=function(){
for(var j=0;j<tabNavLis.length;j++){
tabNavLis[j].className="";
tabWrapDivs[j].className="";
}
this.className="active";
tabWrapDivs[this.index].className="show";
}
}
}
tab("tabNav","tabWrap");
tab("picNav","picWrap");
</script>
</body>
</html>
