6.2.1 DOM树

从原理上来看，每当通过浏览器打开一个网页，DOM会根据这个网页创建一个文档对象，这就是DOM，是一个树型结构模型。在这个树型结构模型中，网页中的元素与内容表现为一个个相互连接的节点。DOM的最小组成单位叫作节点，以节点的方式表示文档中的各种内容，如下列代码所示。	
      
 ```
<html>
<head>
<title>标题</title>
</head>
<body> 
<h1>一级标题</h1>
<p>文档段落</p>
</body>
</html>

 ```
 上述代码，在DOM中会根据HTML文档中标签的嵌套层次将HTML文档处理为DOM树，如图所示:	
 
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/88a946f9e03bb1da9933f9d8f990daf1.image.webp)


  在DOM中，每一个对象都是一个节点，下面分别介绍其概念。
  
（1）根节点，处于树的最顶层，如<html>。
    
（2）父节点，一个节点之上的节点，如<head>的父节点是<html>。
    
（3）子节点，一个节点之下的节点就是该节点的子节点，如<body>的子节点是<h1>和<p>。
    
（4）兄弟节点，处于同一层次的节点，如<head>和<body>就是兄弟节点。
    
（5）叶子节点，树最底层的节点，如“标题”“文档段落”等文本。
   
    
# 6.2.2 DOM节点类型
    
 根据W3C标准，DOM树中的节点分为12种类型。其中常用的节点类型是元素、属性、文本、注释、文档5种，如表所示。
    


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8da15ae7bd588ad11794c001a1d7d37d.image.webp)


   
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7787c88e3cdc9219928a826b326a8e86.image.webp)
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/12b034c85c4587f6e03a1ae12298742f.image.webp)
    
    

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/495974fbb7f24d2d2eab071128077af0.image.webp)
      
# 6.2.3 HTML DOM对象分类

   1. 节点对象
    
节点对象是最核心的对象，用来表示DOM树中的节点。
    
2. 元素对象
    
元素对象是最基础的对象，用来表示HTML文档中的元素。Element对象提供的属性和方法对DOM节点对象和HTML元素对象都适用。
    
3. 文档对象
    
在HTML DOM中的Document对象表示整个HTML文档。其继承和封装了核心DOM对象的属性和方法，所以核心DOM对象的方法和属性在HTML DOM中也可以正常使用。

4. 特定类型的HTML元素对象
      在BOM对象中也为不同类型的HTML元素定义了相应类型的元素对象，对象名称一般是标签名称，不过首字母需大写。DOM也为这些对象提供了属性和方法。所以在DOM中，整个HTML文档的元素都是对象。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e4ca14fcfdc3e61f20935c7b99f03627.image.webp)

     


     



6.2 认识HTML DOM

# 6.1.1 DOM概述

DOM对象是处理HTML文档的技术。通过DOM对象，

JavaScript可以动态访问、更新、操纵HTML页面的内容、结构和样式。

 DOM定义了访问HTML和XML文档的标准，是通用型的标准，为所有标记语言而设计。DOM将标记语言文档的各个组成部分封装为对象，可以使用这些对象对标记语言文档进行CRUD操作，即增加（Create）、检索（Retrieve）、更新（Update）和删除（Delete）操作。
 
 DOM 是中立于平台和语言的接口，W3C  DOM 标准被分为3个不同的部分。
 
 1. 核心 DOM——针对任何结构化文档的标准模型
核心 DOM提供了操作文档的公有属性和方法，就相当于“鼻祖”。它可操作一切结构化文档（包括HTML文档和XML文档）的API。
2. HTML DOM——针对 HTML 文档的标准模型
HTML DOM是专门操作HTML文档的简化版DOM，仅对常用的复杂API进行了简化，对核心DOM进行了在HTML方面的拓展。
3. XML DOM——针对XML文档的标准模型
XML DOM提供了所有XML元素的对象和属性，以及它们的访问方法，与HTML DOM类似。
在JavaScript中，一般使用的是HTML DOM，在后文中若未专门说明，DOM指的就是HTML DOM。

# 6.1.2 核心DOM

HTML DOM和XML DOM都是核心DOM的扩展和封装，对于核心DOM的对象，HTML DOM和XML DOM都可以使用。核心DOM的对象主要有以下几个。

（1）Document：文档对象。

（2）Element：元素对象。

（3）Attribute：属性对象。

（4）Text：文本对象。

（5）Comment：注释对象。

（6）Node：节点对象。


![](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6bd13bc805e8f368d284e7eb045c9e6e.image.webp)


Node对象是其他5个对象的父对象，也就是说它们之间的关系如图所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/857f85a8cef658872d1548f7bfa8d645.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/7478e9178edd9e49ca4db110ec42c5df.image.webp)

代码 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/984e5543e6d7838daeb605a9a9c96618.image.webp)

```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        
        <title>DOM对象</title>
    </head>
    <body>

        

        <p>核心DOM对象</p>

        <script >
            console.log(document.body.childNodes);
        </script>
        
    </body>
</html>
```

效果图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e6cbd3cb85c59680862fdea8fedab989.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/45d96eb4b03488c52824c1b1b3f452e7.image.webp)

# 6.1.3 Document对象

Document 对象是DOM文档树的根，为我们提供对文档数据的最初（或最顶层）的访问入口。Document对象提供了创建和使用元素对象、文本对象、注释对象等对象的属性和方法。Node 对象提供了一个ownerDocument属性，用来将这些对象与创建它们的Document关联起来。Document对象提供了一系列的关于元素的属性和方法。 

（1）getElementById()：根据元素的ID值来获取元素对象，其中ID是唯一的。

（2）getElementsByTagName()：根据元素名称获取元素对象，其返回值是一个数组。

（3）getElementsByName()：根据name属性获取元素对象，其返回值是一个数组。

6.1 认识JavaScript

4月3日，指导一位学生进行Andorid游戏开发时，电脑卡死，因此下决心重新配置一个台式机。


![daacf458f9a40fe136f45dbb927b099.jpg](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/eb4ba264ef1b09c5fb910b6a731ecc02.daacf458f9a40fe136f45dbb927b099.webp)

原打算利用现有电脑配置，在上面进行更新，但一点点地拆装后发现原电脑配置基本上无法使用，只能一个个零配件去重新采购并组装。

原电脑配置：联想天逸510S，2018年2月采购

全部选择的京东下单，经过几天不断地调整、采购、组装，最终定下的配置如下：



| 序号 | 配件     | 原配件型号                       | 说明                                        | 新购型号                 | 价格 | 备注                                                         |
| ---- | -------- | -------------------------------- | ------------------------------------------- | ------------------------ | ---- | ------------------------------------------------------------ |
| 1    | CPU      | 酷睿i3 7100 * 4核 3.9GHz         | 只能满足文档办公使用，软件开发时性能不足    | Intel i5-12600KF         | 1193 | 酷睿12代,10核16线程，4.9GHz，可超频，无集显                  |
| 2    | 主板     | B250                             | 集成声卡，无线网卡,集成显卡                 | 技嘉小雕Wifi B760        | 1486 | 要求后续高扩展性。支持DDR5*4个，可扩展192GB。ATX标准板型，SSD，WIFI+蓝牙。 |
| 3    | 内存     | DDR4*2个，2400MHz                | 应该是4GB+后买的8G                          | 三星 DDR5 16GB           | 385  | 5600频率。DDR5插槽与DDR4不一致，先用一根，等降价再买组成双通道 |
| 4    | 机械硬盘 | 1TB HDD                          | ST1000DM003-1SB102，全面7200转 希捷单碟1TB  | 不换                     |      |                                                              |
| 5    | 固态硬盘 | Samsung PSSD T7 SCSl Disk Device | 原有固态硬盘是移动硬盘，但用的usb-typec接口 | 三星 500GB               | 406  | 980 Nvme PCIe3.0*4                                           |
| 6    | 机箱     | 8.4L                             | 不适用                                      | 爱国者 A15               | 107  | 中塔机箱，3硬盘位，8风扇位，支持水冷，尺寸338x190x428，方便后续拓展；不支持Type-C |
| 7    | 电源     | 航嘉                             | 180w，不适用，机箱固定                      | 航嘉WD650K               | 326  | 80Plus金牌、全电压，智能温控                                 |
| 8    | 显卡     | 原先是集成显卡                   |                                             | 盈通AMD RX6500XT         | 994  | RX6500 XT 4G D6大地之神；千元内性价比最高，平时对显卡要求不高。HDMI+DP接口，双显示器需买DP转HDMI线。 |
| 9    | 散热器   |                                  | 原先散热风扇无法使用                        | 九州风神 玄冰400i风冷    | 58   | 九州风神 玄冰400i风冷                                        |
| 8    | 显示器1  | 小米                             | Redmi 27                                    | 不换，带音频输入和输出孔 |      |                                                              |
| 9    | 显示器2  | 长城晶显                         |                                             | 不换                     |      |                                                              |
| 10   | 其他     |                                  |                                             | DP-HDMI线                | 12   | 第2显示屏高清连接                                            |

202404配机价格：4967元

其他原有配件：

1. 摄像头，Logi C270 HD，摄像头+Microphone音频输入
2. 音箱，爱国者


在采购与组装过程中，不断地去网上了解各个配件信息。也遇到一些问题，历经了几天才算搞定。本来是想尽可能少换原来配置，能用就将就着先用，但拆装时发现原配置要么是不通用、要么是不兼容之类、甚至固定死了是无法拆下来。装完机后，刚开机时运行一会就自动关机，经过分析后才发现是CPU温度过高，是因为散热器安装错误导致。第一次采购的DP转HDMI线无效，导致第二显示屏无法起作用，一度以为是显卡问题或者接线错误。

台式电脑组装


# 项目描述

张华同学特别关注国产软件和国产电脑的新技术和新产品，听说他喜欢的品牌最近又发布了新品，就登录电商网站查看，在浏览商品信息时，发现下图所示的效果，当将鼠标在小图中移动时，右边的放大图片也相应地移动。 


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f59013f4f643d811a409cef1a452b05e.image.webp)

刘老师告诉他，这是各大电商网站为了提高用户体验，在页面上使用了放大镜效果。张华同学迫不及待地想编写这样的程序，可是他发现自己遇到了很多困难，不知道怎么获取图片、放大镜怎么显示、放大镜怎么移动等。

刘老师告诉他，这需要学习文档对象模型（Document Object Model，DOM）相关知识，这是一种处理HTML文档的应用程序接口，它的作用是将网页转为JavaScript对象，从而可以使用JavaScript对网页进行各种操作，如增、删内容等。



# 项目分析

根据项目目标，实现商品放大镜效果，分为如下3步。
- 放大镜和大图的显示和隐藏。

元素的显示和隐藏表示元素的属性发生变化，这里通过改变元素的样式实现。
- 放大镜的移动。

放大镜的移动在【任务实践6-8】中已经实现。

- 大图的移动——offsetWidth和offsetHight。

大图的移动和放大镜的移动是同步的，可以通过图所示的分析得出。


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a1dc6e0bad2ffb433b36f293baa166ad.image.webp)


图片素材如下：

小图，350*350

![01.jpg](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6c5c7a9c96a88746e952001e471a83c1.01.webp)

大图，800*800

![001.jpg](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ddb3e86aafa3029e3f7c845a6b593a88.001.webp)

也可自己找别的图片，然后设置好对应大小
# 项目代码

1. 页面框架html

该页面有两部分，小图和大图，小图中有放大镜，大图可移动显示，具体框架如下所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d4b3fb9837701e2fff0df1d1bca5f09b.image.webp)

```
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>商品放大镜</title>
    </head>
    <body>
        <div id="smallBox">
            <div id="zoom"></div>
            <img src="js6/smallImage.png" >
        </div>
        <div id="bigBox">
            <img src="js6/bigImage.png">
        </div>
    </body>
</html>
```

效果

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c20b9b5a5a54dac611842b5ae1528267.image.webp)

css代码 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/42d43e6ce3fd13d94af4b40219796c19.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b33acfb382a0a5db68acec926f6ec43f.image.webp)

```
*{
    margin:0;
    padding: 0;
}
#smallBox{
    position: relative;
    z-index: 1;
    width: 350px;
    height: 350px;
    margin: 50px;
    border: 1px solid #ccc;
}
#zoom{
    display: none;
    width: 235px;
    height: 235px;
    position: absolute;
    background: #ffffcc;
    border: 1px solid #ccc;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
#bigBox{
    display: none;
    position: absolute;
    top:0;
    left: 350px;
    width: 540px;
    height: 540px;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index: 1;
}
#bigBox img{
    position: absolute;
    z-index: 5;
}
```

3.js脚本代码

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8cc8b014291635669aee307b181c79d2.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d13a6961ad1280776b3a1a250fd98120.image.webp)

```
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
var bigBoxImg = bigBox.querySelector("img");
var zoom = document.getElementById("zoom");

smallBox.onmouseover = function(){
    zoom.style.display = "block";
    bigBox.style.display = "block";
}
smallBox.onmouseout = function(){
    zoom.style.display = "none";
    bigBox.style.display = "none";
}

smallBox.onmousemove = function(){
    var event = event || window.event;
    var boxX = event.pageX - smallBox.offsetLeft;
    var boxY = event.pageY - smallBox.offsetTop;
    var zoomX = boxX - zoom.offsetWidth/2;
    var zoomY = boxY - zoom.offsetHeight/2;
    if(zoomX < 0 ) zoomX = 0;
    else if(zoomX>smallBox.offsetWidth-zoom.offsetWidth)
        zoomX=smallBox.offsetWidth-zoom.offsetWidth;
    if(zoomY < 0 ) zoomY = 0;
    else if(zoomY>smallBox.offsetHeight-zoom.offsetHeight)
        zoomY=smallBox.offsetHeight-zoom.offsetHeight;

    zoom.style.left = zoomX+"px";
    zoom.style.top = zoomY+"px";

    var bigMove = bigBoxImg.offsetWidth-bigBox.offsetWidth;
    var zoomMove = smallBox.offsetWidth-zoom.offsetWidth;
    var rate = bigMove/zoomMove;
    bigBoxImg.style.left = -rate*zoomX+"px";
    bigBoxImg.style.top = -rate*zoomY +"px";


}
```
最后完成时的html代码 

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8f82c556492f8e245245cfd7be2dda89.image.webp)

注意js代码放置的位置 


效果图

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2361adb96561981cce9eafe52b0cf797.image.webp)

JavaScript项目6 商品放大镜


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f23ad8da2d74485a52e82e681f6ecc37.image.webp)

# 4.2.1 消息处理函数


在JavaScript中，消息对话框函数本质上是由JavaScript的内置对象的方法实现的，它能够将程序执行的结果在页面上以对话框的形式直观地显示出来。消息对话框在JavaScript中应用很广泛，经常用来在页面上输出结果、接收通过键盘输入的数据、实现程序与用户的交互等。

JavaScript程序中常用的消息对话框有警示对话框、确认对话框和提示对话框3种，下面分别讲解这3种消息对话框对应函数的语法格式及其在程序中的应用。

1.警示对话框函数
1.使用alert( )函数可以弹出警示对话框。alert()的功能是直接在页面上以对话框的形式输出字符串或者变量的值。语法格式如下：
```
alert();
```
	
alert()函数除了输出字符串和变量外，警示对话框中还有一个“确定”按钮，单击这个“确定”按钮会关闭警示对话框。



任务实践4－2


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/add39b5e566711967c5b07527b7dd2a0.image.webp)



    本任务实践主要目的是利用警示对话框在页面上输出内容，可以通过alert()来实现。

为了符合编程的规范，在编程时要先声明一个变量来保存姓名，对变量赋值后，通过alert()输出变量的值。

**alert()警示对话框除了显示一些提示信息以外，还经常用于程序的调试，在程序执行过程中，检验程序的中间结果及程序是否已执行等。**



2. 确认对话框函数
使用confirm()函数可以显示确认对话框，语法格式如下
```
confirm(确认内容);
```

确认对话框的功能同警示对话框功能十分相似，不同之处是，确认对话框有“确定”“取消”两个按钮，并且在单击“确定”按钮后会返回布尔值true，单击“取消”按钮将返回布尔值false。



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/eab4c3a3a824019bd71afa7d7354543d.image.webp)




3.提示对话框
使用prompt()函数可以打开提示对话框，提示对话框不仅有“确定”“取消”两个按钮，而且提供用户可以用键盘输入的文本框，这个文本框可以实现用户与系统的交互功能。语法格式如下。
```
prompt(提示部分[，默认部分])
```

其中，“提示部分”是提示需要输入的内容的语句，“默认结果”部分可以有，也可以没有。提示对话框是具有人机交互功能的消息对话框。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/49d6d0b5f2738677e61fcb72bbac067a.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3511cca190ad746e670315b0e441e901.image.webp)







3个函数同时使用的例子：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b9e14749ae8ec8b295840d9b642c8afb.image.webp)

   
# 4.2.2 数值处理函数
在JavaScript中，数值处理函数本质上是由JavaScript的内置对象的方法实现的，它能够对数据进行判断、格式化等，具体介绍如下。

1. isNaN()、isFinite()函数


  isNaN()函数用来确定一个变量是否为非数字。如果是非数字，返回true；如果是数字，则返回false，如下列代码所示。	

```
isNaN(1);         //返回false
isNaN (true);     //返回false
isNaN (“a”);     //返回true

```

  isFinite()函数用来确定一个变量是否有限，如果这个变量不是NaN、字符串、负无穷或正无穷，那么isFinite()将返回true，否则将返回false，如下列代码所示。

```
isFinite(1);         //返回true
isFinite(true);     //返回true
isFinite(“a”);     //返回false

```

      
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/750aa9578634fd4ac60155223911f43e.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/3ad0c0abaf24c2a36de1aaef4a95d94c.image.webp)



2. parseFloat()、parseInt()函数

   parseFloat()函数用来将数字或者数字与字母混合的字符串转换成浮点数。对于由数字和字母组成的字符串，如果开头不是数字，则返回NaN；如果开头是数字，那么将第一个字母前面的数字转换成浮点数。

   parseInt()函数同parseFloat()类似，用来将数字或者数字和字母混合的字符串转换成整数，如果字符串有小数部分，则只保留整数部分。对于由数字和字母组成的字符串，如果开头不是数字，则返回NaN；如果开头是数字，那么将第一个字母前面的数字转换成整数，如下列代码所示。	



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/81021aca1b57973473b06761d5b7c33e.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/472484edded2465d396f94ade27814db.image.webp)



![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/6024001867c5a7e706f417a4240e4d33.image.webp)







3. toString()、toFixed()函数2. p

    toString()函数用来将数值型的数据转换为字符串型，也可以返回指定进制的数据（默认为十进制数据），语法格式如下。
 ```
 num.toString([进制]);  
//如果未指定进制，将num转换为默认的十进制的字符串；如果指定进制，那么返回相应进制的数据
 ```

 toFixed()函数用来将浮点数转换为固定小数位数的数字。语法格式如下

```
num.toFixed([位数]);
//将num四舍五入，保留指定位数的小数；若省略参数，则只保留整数部分。
```

# 4.2.3 字符串处理
在JavaScript中，字符串处理函数同前面介绍的消息对话框函数、数值处理函数一样，都是由JavaScript的内置对象的方法实现的，字符串处理函数能够对字符串进行一定的操作，具体介绍如下。

eval()函数

eval()函数用来计算字符串中的表达式，并返回表达式的值，如下列代码所示
```
alert(eval("30+9/3"));返回33
alert(eval("3>4"));  返回false
alert(eval("6>5"));  返回true
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ca039274fc24e6edcdc9c042c2cc619f.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ccd1d17fa6f80ce365784b8e140f01c9.image.webp)

2. escape()、unescape()函数

  escape()函数和unescape()函数是一对互逆函数。escape()函数用于对字符串中的字符（除字母和数字）进行编码转换，转换为%AA或者%UUUU的形式。AA指的是字符ASCII的十六进制数的形式，UUUU指的是非ASCII字符（如汉字）的Unicode的形式，如下列代码所示。
```
alert(escape("Hello，王小丽！")); 
//此处返回Hello%2C%u738B%u5C0F%u4E3D%uFF01
alert(unescape("Hello%2C%u738B%u5C0F%u4E3D%uFF01"));
//此处返回Hello，王小丽！
```
