js下 Day01、DOM对象，BOM浏览器对象模型

一．初识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