JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】

左手的ㄟ右手 2022-10-29 05:20 207阅读 0赞

>  *  **w3school 在线教程：[https://www.w3school.com.cn][https_www.w3school.com.cn]**
> 
> 1.  [JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】][JavaScript_01]【day01】
> 2.  [JavaScript学习笔记02【基础——对象（Function、Array、Date、Math、RegExp、Global）】][JavaScript_02_Function_Array_Date_Math_RegExp_Global]【day01】
> 3.  [JavaScript学习笔记03【基础——对象（RegExp、Global）】][JavaScript_03_RegExp_Global]【day01】
> 4.  [JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】][JavaScript_04_DOM_BOM]【day02】
> 5.  [JavaScript学习笔记05【高级——DOM对象、JavaScript中的事件】][JavaScript_05_DOM_JavaScript]【day02】

**目录**

07 DOM和事件的简单学习

今日内容

DOM简单学习

Image 对象的属性

事件简单学习

案例1\_电灯开关

08 BOM对象

BOM\_概述

Navigator：浏览器对象

Screen：显示器屏幕对象

BOM\_Window\_弹出方法

Window——对象、对象集合、对象属性、对象方法

BOM\_Window\_打开关闭方法

open()：打开一个新的浏览器窗口

BOM\_Window\_定时器方法

一次性定时器

循环定时器

案例2\_轮播图

BOM\_Window\_属性

BOM\_Location

Location——对象、对象属性、对象方法、对象描述

案例3\_自动跳转首页

BOM\_History

History——对象、对象属性

--------------------

# 07 DOM和事件的简单学习 #

## 今日内容 ##

> 1. JavaScript：  
>     1. ECMAScript：  
>     2. BOM：  
>     3. DOM：  
>         1. 事件

## DOM简单学习 ##

> **DOM简单学习：为了满足案例要求。**
> 
> \* 功能：控制html文档的内容  
> \* 获取页面标签(元素)对象：Element  
>         \* document.getElementById("id值")：通过元素的id获取元素对象
> 
> \* 操作Element对象：  
>         1. 修改属性值：  
>                 1. 明确获取的对象是哪一个？  
>                 2. 查看API文档，找其中有哪些属性可以设置  
>         2. 修改标签体内容：  
>                 \* 属性：innerHTML  
>                 1. 获取元素对象  
>                 2. 使用innerHTML属性修改标签体内容

> ![2021020817452366.png][]
> 
> ![20210208174622868.png][]

### Image 对象的属性 ###

> ![2021020817391232.png][]

## 事件简单学习 ##

> \* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。  
>     \* 造句：  xxx被xxx,我就xxx  
>         \* 我方水晶被摧毁后，我就责备对友。  
>         \* 敌方水晶被摧毁后，我就夸奖自己。
> 
> \* 如何绑定事件  
>     1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码  
>            事件：onclick--- 单击事件
> 
>     2. 通过js获取元素对象，指定事件属性，设置一个函数

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

## 案例1\_电灯开关 ##

> 分析：  
>     1.获取图片对象  
>     2.绑定单击事件  
>     3.每次点击切换图片  
>         \* 规则：  
>             \* 如果灯是开的 on，切换图片为 off  
>             \* 如果灯是关的 off，切换图片为 on  
>         \* 使用标记flag来完成

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2][]  ![20210208180939387.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>电灯开关</title>
    	</head>
    	<body>
    		<img id="light" src="img/off.gif">
    		<script>
    			// 1.获取图片对象
    			var light = document.getElementById("light");
    			var flag = false; // 代表灯是灭的 off图片
    			// 2.绑定单击事件
    			light.onclick = function() {
    				if (flag) { // 判断：如果灯是开的，则灭掉
    					light.src = "img/off.gif";
    					flag = false;
    				} else { // 如果灯是灭的，则打开
    					light.src = "img/on.gif";
    					flag = true;
    				}
    			}
    		</script>
    	</body>
    </html>

# 08 BOM对象 #

## BOM\_概述 ##

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3][]  ![20210208181704458.png][]

> 1. 概念：Browser Object Model 浏览器对象模型  
>     \* 将浏览器的各个组成部分封装成对象。
> 
> 2. 组成：  
>     \* Window：窗口对象  
>     \* *Navigator：浏览器对象*  
>     \* *Screen：显示器屏幕对象*  
>     \* History：历史记录对象  
>     \* Location：地址栏对象

### Navigator：浏览器对象 ###

> ![20210208181851147.png][]
> 
> ![20210208181915569.png][]
> 
> ![20210208181956206.png][]

### Screen：显示器屏幕对象 ###

> ![20210208182028189.png][]
> 
> ![20210208182116796.png][]
> 
> ![20210208182148384.png][]

## BOM\_Window\_弹出方法 ##

> **Window：窗口对象**  
> **    1. 创建**  
> **    2. 方法**  
>          1. 与弹出框有关的方法：  
>             alert()：显示带有一段消息和一个确认按钮的警告框。  
>             confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。  
>                 \* 如果用户点击确定按钮，则方法返回true  
>                 \* 如果用户点击取消按钮，则方法返回false  
>             prompt()：显示可提示用户输入的对话框。  
>                 \* 返回值：获取用户输入的值
> 
> **    3. 属性**  
> **    4. 特点**  
>         \* Window对象不需要创建可以直接使用“window”来进行调用：window.方法名();  
>         \* window引用可以省略：方法名();
> 
> ![20210208192815469.png][]

### Window——对象、对象集合、对象属性、对象方法 ###

> ![2021020819184880.png][]
> 
> ![20210208191858498.png][]
> 
> ![20210208191952229.png][]

## BOM\_Window\_打开关闭方法 ##

> Window：窗口对象  
>     1. 创建  
>     2. 方法  
>          1. 与弹出框有关的方法：  
>             alert()：显示带有一段消息和一个确认按钮的警告框。  
>             confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。  
>                 \* 如果用户点击确定按钮，则方法返回true  
>                 \* 如果用户点击取消按钮，则方法返回false  
>             prompt()：显示可提示用户输入的对话框。  
>                 \* 返回值：获取用户输入的值  
>          **2. 与打开\\关闭有关的方法：**  
>             close()：关闭浏览器窗口。  
>                 \* 谁调用我 ，我关谁  
>             open()：打开一个新的浏览器窗口  
>                 \* 返回新的Window对象
> 
>     3. 属性  
>     4. 特点  
>         \* Window对象不需要创建可以直接使用“window”来进行调用：window.方法名();  
>         \* window引用可以省略：方法名();

### open()：打开一个新的浏览器窗口 ###

> ![20210208193310619.png][]
> 
> ![20210208193418665.png][]

### open()：打开一个新的浏览器窗口 ###

> ![20210208194051613.png][]

## BOM\_Window\_定时器方法 ##

> **Window：窗口对象**  
>    ** 1. 创建**
> 
>     **2. 方法**  
>          1. 与弹出框有关的方法：  
>             alert()    显示带有一段消息和一个确认按钮的警告框。  
>             confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。  
>                 \* 如果用户点击确定按钮，则方法返回true  
>                 \* 如果用户点击取消按钮，则方法返回false  
>             prompt()    显示可提示用户输入的对话框。  
>                 \* 返回值：获取用户输入的值  
>          2. 与打开关闭有关的方法：  
>             close()    关闭浏览器窗口。  
>                 \* 谁调用我，我关谁  
>             open()    打开一个新的浏览器窗口  
>                 \* 返回新的Window对象  
>          3. 与定时器有关的方式  
>             setTimeout()：在指定的毫秒数后，调用函数或计算表达式。  
>                 \* 参数：  
>                       1. js代码或者方法对象  
>                       2. 毫秒值  
>                 \* 返回值：唯一标识，用于取消定时器  
>             clearTimeout()：取消由 setTimeout() 方法设置的 timeout。  
>             setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。  
>             clearInterval()：取消由 setInterval() 设置的 timeout。
> 
>     **3. 属性：**  
>         1. 获取其他BOM对象：  
>             history  
>             location  
>             Navigator  
>             Screen:  
>         2. 获取DOM对象  
>             document
> 
>     **4. 特点：**  
>         \* Window对象不需要创建可以直接使用“window”来进行调用：window.方法名();  
>         \* window引用可以省略：方法名();

### 一次性定时器 ###

> ![20210208195627699.png][]

### 循环定时器 ###

> ![20210208195734168.png][]

## 案例2\_轮播图 ##

> 分析：
> 
> 1.  在页面上使用img标签展示图片
> 2.  定义一个方法，修改图片对象的src属性
> 3.  定义一个定时器，每隔3秒调用方法一次。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播图</title>
    	</head>
    	<body>
    		<img id="img" src="img/banner_1.jpg" width="100%">
    		<script>
    			var number = 1;
    			function fun() {
    				number++;
    				if (number > 3) { // 判断number是否大于3
    					number = 1;
    				}
    				var img = document.getElementById("img"); // 获取img对象
    				img.src = "img/banner_" + number + ".jpg"; // 修改图片src属性
    			}
    			//定义定时器
    			setInterval(fun, 3000); // 3秒后调用fun方法，img早已加载好
    		</script>
    	</body>
    </html>

## BOM\_Window\_属性 ##

> **Window：窗口对象**  
>    ** 1. 创建**
> 
>     **2. 方法**  
>          1. 与弹出框有关的方法：  
>             alert()    显示带有一段消息和一个确认按钮的警告框。  
>             confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。  
>                 \* 如果用户点击确定按钮，则方法返回true  
>                 \* 如果用户点击取消按钮，则方法返回false  
>             prompt()    显示可提示用户输入的对话框。  
>                 \* 返回值：获取用户输入的值  
>          2. 与打开关闭有关的方法：  
>             close()    关闭浏览器窗口。  
>                 \* 谁调用我，我关谁  
>             open()    打开一个新的浏览器窗口  
>                 \* 返回新的Window对象  
>          3. 与定时器有关的方式  
>             setTimeout()：在指定的毫秒数后，调用函数或计算表达式。  
>                 \* 参数：  
>                       1. js代码或者方法对象  
>                       2. 毫秒值  
>                 \* 返回值：唯一标识，用于取消定时器  
>             clearTimeout()：取消由 setTimeout() 方法设置的 timeout。  
>             setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。  
>             clearInterval()：取消由 setInterval() 设置的 timeout。
> 
>     **3. 属性：**  
>         1. 获取其他BOM对象：  
>             history  
>             location  
>             Navigator  
>             Screen  
>         2. 获取DOM对象  
>             document
> 
>     **4. 特点：**  
>         \* Window对象不需要创建可以直接使用“window”来进行调用：window.方法名();  
>         \* window引用可以省略：方法名();

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5][]

## BOM\_Location ##

> **Location：地址栏对象**  
>     1. 创建(获取)：  
>         1. window.location  
>         2. location
> 
>     2. 方法：  
>         \* reload()：重新加载当前文档（刷新）。
> 
>     3. 属性  
>         \* href：设置或返回完整的URL。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6][]
> 
> \\![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7][]

### Location——对象、对象属性、对象方法、对象描述 ###

> ![20210208202949519.png][]
> 
> ![20210208203011504.png][]
> 
> ![20210208203034664.png][]

## 案例3\_自动跳转首页 ##

> 分析：  
>    1.显示页面效果 <p>  
>    2.倒计时读秒效果实现  
>        2.1.定义一个方法，获取span标签，修改span标签体内容，时间--（减1）  
>        2.2.定义一个定时器，1秒执行一次该方法  
>    3.在方法中判断时间如果<= 0 ，则跳转到首页

> ![20210208204633579.png][]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>自动跳转</title>
    		<style>
    			p {
    				text-align: center;
    			}
    			span {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<p>
    			<span id="time">5</span>秒之后，自动跳转到首页...
    		</p>
    		<script>
    			//倒计时读秒效果实现
    			var second = 5;
    			var time = document.getElementById("time");
    			//定义一个方法，获取span标签，修改span标签体内容，时间--
    			function showTime() {
    				second--;
    				//判断时间如果<= 0 ，则跳转到首页
    				if (second <= 0) {
    					//跳转到首页
    					location.href = "https://www.baidu.com";
    				}
    				time.innerHTML = second + "";
    			}
    			//设置定时器，1秒执行一次该方法
    			setInterval(showTime, 1000);
    		</script>
    	</body>
    </html>

## BOM\_History ##

> History：历史记录对象  
>     1. 创建(获取)：  
>         1. window.history  
>         2. history
> 
>     2. 方法：  
>         \* back()：加载 history 列表中的前一个 URL。  
>         \* forward()：加载 history 列表中的下一个 URL。  
>         \* go(参数)：加载 history 列表中的某个具体页面。  
>             \* 参数：  
>                 \* 正数：前进几个历史记录  
>                 \* 负数：后退几个历史记录  
>     3. 属性：  
>         \* length：返回当前窗口历史列表中的 URL 数量。

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9][]

### History——对象、对象属性 ###

> ![20210208204829442.png][]
> 
> ![20210208205031242.png][]

[https_www.w3school.com.cn]: https://www.w3school.com.cn/
[JavaScript_01]: https://blog.csdn.net/weixin_44949135/article/details/113743848
[JavaScript_02_Function_Array_Date_Math_RegExp_Global]: https://blog.csdn.net/weixin_44949135/article/details/113743896
[JavaScript_03_RegExp_Global]: https://blog.csdn.net/weixin_44949135/article/details/113759141
[JavaScript_04_DOM_BOM]: https://blog.csdn.net/weixin_44949135/article/details/113760098
[JavaScript_05_DOM_JavaScript]: https://blog.csdn.net/weixin_44949135/article/details/113755835
[2021020817452366.png]: /images/20221024/2c9aec5313cc49d9b1747efe2d2b6f2c.png
[20210208174622868.png]: /images/20221024/affa2126c3fc48e2bca1e52646a5bf4a.png
[2021020817391232.png]: /images/20221024/d470df50ecbe48ccadaadf913d766081.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221024/a3b0ff18633249b395c4cbd517ec328a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/00fe8e55f3b94f86895d1b45ae204bba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210208180911393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210208180939387.png]: /images/20221024/b85726f4fa75499995afa10758898260.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210208181638196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ==,size_16,color_FFFFFF,t_70
[20210208181704458.png]: /images/20221024/148a37a41fa440588b88ec09d0dca26f.png
[20210208181851147.png]: /images/20221024/9209a55163f4407f922cca98eef6cef2.png
[20210208181915569.png]: /images/20221024/e9229dc8ed5b467f90e21d524257d8d9.png
[20210208181956206.png]: /images/20221024/26bd166447654a2b9ed26711baf6ae0d.png
[20210208182028189.png]: /images/20221024/f3090905dfb041d79d2afae2d690c09b.png
[20210208182116796.png]: /images/20221024/73926606aea74855820b179c410d4e8c.png
[20210208182148384.png]: /images/20221024/6304398e12614de2838af2ae752d3e81.png
[20210208192815469.png]: /images/20221024/cd5ad7f92a7949a390a80074564438dc.png
[2021020819184880.png]: /images/20221024/d828cca47aa3427398d62c31fe020073.png
[20210208191858498.png]: /images/20221024/fe69ece9b7c846cdbf9a1f3e04b210ed.png
[20210208191952229.png]: /images/20221024/dd71ea4ec5924d8aa4792b1dd99eab6a.png
[20210208193310619.png]: /images/20221024/c8bd19402d0d4aa389d1e195c4b00fe3.png
[20210208193418665.png]: /images/20221024/4b1a05576f204796af28c6f104deee2f.png
[20210208194051613.png]: /images/20221024/5edd2b8605da4d3fa436291a90002594.png
[20210208195627699.png]: /images/20221024/02a353688c754a6b8b9c55a81797e24d.png
[20210208195734168.png]: /images/20221024/ed1995eb30504cb2bf4fdefc224a5862.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/e3ee118f505748c2927ebe194d5cd06e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/dbc4b3d2e2c74691814942c839e09471.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/29d754bf5ad84332a82c934358641a44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/a3ffba16d12c40cd893022060ef922e0.png
[20210208202949519.png]: /images/20221024/a366feb3390b4d0c9167a216a1a6ea6a.png
[20210208203011504.png]: /images/20221024/f51961911ef441fd81629fc4315b1812.png
[20210208203034664.png]: /images/20221024/11d68b7e8cb2423b800be0ad893ad02c.png
[20210208204633579.png]: /images/20221024/b7f47ddd77544090a48b6378c5134940.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/af0ab27a88e24c27ae6f9bb842d75a6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/f0f3b84188854f03ab49cd5456e20aba.png
[20210208204829442.png]: /images/20221024/15b26a08b2dd4140819900009af81bfe.png
[20210208205031242.png]: /images/20221024/40750c633b71405f9ac26311d871b898.png