一．初识DOM
1．什么是DOM？为什么学习DOM
2．DOM是实现js在网页实现交互的关键环节，我们的js代码就是通过DOM的方法来实现对于html内容的操作。
3．认识DOM实现了js和网页结合的原理；
4．认识DOMTREE;认识DOM的分类；
5．简单获取元素，简单事件绑定；
6．认识DOM，js，html，所运行的环境BOM；
#二．BOM简介:Browser Object Model
**1. Bom ** 是什么？
由浏览器实现的供JavaScript程序调用的一组对象
2. **Bom ** 的组成部分？
1. Window对象表示当前浏览器窗口,是Bom的核心
2. document对象表示当前页面文档相关信息
3. location对象表示当前窗口地址栏相关信息
4. history对象表示当前浏览器历史记录相关信息
5. screen对象表示客户端屏幕相关信息
6. navigator对象表示浏览器自身相关信息
7. Event事件集合
#三．Window对象
所有在全局声明的变量和函数，自动成为window对象的属性和方法
#四．location对象
1. location.href 获取或设置地址栏完整路径
2. location.search 获取地址栏？后的参数信息
3. location.hash 获取地址栏#后的参数信息
4. location.reload() 刷新页面
#五．history对象
1. history.go(n) n正数:返回历史纪录后n页 ; n负数:返回历史记录前n页 ; n为0相当于刷新页面
2. history.back() 返回上一页
3. history.forword() 返回下一页
#六．课堂案例
#1. 打字机
效果图
功能思路分析:
1. 点击开始打字按钮实现打字效果
2. 利用间歇调用定时器每隔一段时间打一个字(setIntelval)
3. 当所有的字打完后停止打字(根据下标判断)
4. 打字没有结束不能重复点(disabled禁用)
#2. 验证码倒计时
效果图
功能思路分析:
1. 点击获取验证码按钮实现验证码倒计时
2. 利用间歇调用定时器每隔一秒执行一次(setInterval)
3. 当倒计时由初始值减到0时定制倒计时，恢复默认(根据初始值判断)
4. 倒计时没有结束不能重复点击(disabled)
#3. 倒计时
效果图
功能思路分析:
1. 创建一个未来时间，获取时间戳
2. 在定时器中创建一个当前时间获取时间戳
3. 未来时间-当前时间拿到时间差，
4. 将时间差转换为天时分秒输出到页面
#4. 抽奖
效果图
功能思路分析:
1. 点击抽奖按钮显示抽奖过程(setInterval)
2. 5秒后停止抽奖(setTimeout)
3. 停止后显示抽中奖品并从奖品数组中删除抽中的奖品( splice() )
4. 限制抽奖次数( 计数器 )
#七．今日小结
间歇调用定时器:setInterval( function(){}, 毫秒数 ) clearInterval( 定时器名 )
超时调用定时器:setTimeout( function(){}, 毫秒数 ) clearTimeout( 定时器名 )
按钮禁用:元素.disabled
地址栏相关信息:location.href location.search
#八．作业 -- 炫彩点名器
效果图
功能点:
1. 创建一个名单数组，将数组中的数据利用**map().join(‘’)**渲染到页面
2. 点击开始点名按钮,显示抽奖过程(setInterval),过程中每一个li颜色随机变化
3. 5秒后**(setTimeout)**从名单中随机(封装随机函数)点中一人高亮显示(加背景色)。
4. 抽奖过程中按钮禁用(disabled)
#九．数组迭代方法(扩展)
#语法:
arr.forEach(function( item,index,arr){
**//item ** ： 数组中的每一项
//index: 每一项对应的下标
**//arr ** 数组本身
});
#1. forEach()
相当于普通的for循环,没有返回值
#2. map()
得到每一项的返回结果组成的数组
#3. filter()
筛选出返回条件为真的项组成的数组
#4. some()
数组中只要有一项为真就返回true
#5. every()
数组中所有项为真就返回true,否则返回false
