基于文档对象模型(DOM)的综合实验项目设计
2023-11-07刘金华郭珂言俞群爱汪彦龙
刘金华，郭珂言，俞群爱，汪彦龙★
(1.浙江传媒学院媒体工程学院，浙江杭州 310018；2.浙江传媒学院网络数据中心，浙江杭州 310018)
0 引言
Web 前端开发涉及超文本标记语言(HTML) 、级联样式表(CSS) 和JavaScript 编程三大技术。其中，HTML 文档利用标记定义Web 页面的结构和内容；CSS 利用CSS 规则定义HTML 各标记的显示风格，决定Web页面的显示方式，CSS技术实现了内容与表现的分离；JavaScript是基于对象和事件驱动并具有相对安全性的客户端脚本语言。在HTML基础上，利用JavaScript 可以开发交互式Web 页面，使网页包含活动元素和更加精彩的内容。JavaScript 脚本和HTML 文档对象模型(DOM) 共同控制Web 页面的行为[1]。JavaScript 通过事件处理程序来响应用户的事件（如单击鼠标等）和对Web 页面的控制，是Web 前端开发课程的重点内容，也是学生掌握的难点[1-5]。结合单个知识点演示实验来介绍DOM基本概念和用法的教学方式不利于学生从整体上把握基于DOM的动态页面开发。通过合理设计综合性实验有助于学生理解各个知识点，提高学生利用所学知识解决实际问题的工程能力[4,6]。
本文设计了一个DOM 综合实验，实验涉及DOM基本概念、DOM 结点访问、DOM 事件及处理程序、对象（函数）的this指针及绑定和类定义及类间通信等内容。学生通过调试、分析和解决实验中遇到的问题，有效的加深了对JavaScript、DOM 相关知识点和面向对象设计思想的理解。
1 DOM综合实验的相关知识
文档对象模型(DOM)是HTML 和XML 文档的编程接口。它提供了对HTML 文档的结构化描述，将HTML 文档解析为一个由节点对象（包含属性和方法的对象）组成的结构集合，即Web 页面的完全的面向对象表述，提供了同一份HTML 文档的另一种表现、存储和操作的方式。使用JavaScript 等脚本语言能对它进行修改，修改后的影响会直接在Web页面上得到反映[7]。
1.1 DOM结点树
DOM 将HTML 文档表示成以HMTL 元素对应对象作为节点的树形结构，称之为节点树。浏览器在加载HTML 文档的同时构建其对应的DOM 节点树。通常，HTML元素的每个属性在其对应DOM节点对象都有相对应的属性，通过DOM节点对象的方法与属性，可以访问页面中的任何元素，并进行元素的修改、删除以及添加等操作。以下HTML 文档对应的DOM 节点树如图1所示。
图1 DOM节点树
图1中，文档(document)节点表示HTML文档对应DOM 节点树的根节点。HTML 文档中的每个元素在节点树中都有其对应的DOM 节点，节点树中节点的层次关系与对应HTML 文档中文档元素的层次关系一致。
1.2 DOM结点对象获取
DOM 结点树的document 根节点对象提供了多个getElement和querySelector方法，分别根据HTML元素属性和CSS 选择器来获取HTML 元素对应的DOM 节点对象[8]，利用获取的节点对象可对HTML进行各种操作。以下代码为返回id 属性值为id 的HTML 元素对应节点对象的两种方法。
1.3 DOM添加HTML元素
文档对象模型中，document 对象的createElement()方法用来创建新元素，该方法的参数为需要创建元素的标记名。DOM元素对象的appendChild方法用来将其参数对应的元素添加为该元素对象的最后一个孩子结点。
创建img元素的代码如下：
const img=document.createElement(′img′);
img.src=′apple.jpg′;
以上代码创建了一个img元素，但因为该DOM元素尚未添加到DOM 节点树中，所以不会影响Web 页面的显示。以下代码将所创建的img元素添加到文档的
元素中：document.body.appendChild(img);
以上代码执行后，img 元素节点就插入到了DOM节点树中，浏览器立即将该图片渲染出来并在Web页面上显示。
1.4 DOM事件
DOM 事件是对用户输入，点击等行为的响应。JavaScript 与HTML 页面的交互是通过事件实现的。DOM事件有三个要素：事件源（如：按钮）、事件名（如：鼠标单击）和事件处理程序（如：自定义的函数）。文档对象模型将许多DOM元素定义成为可以接收和处理事件的对象，这些DOM 元素对象的addEventListener和removeEventListener方法为指定的事件类型添加和删除事件处理程序。这两个方法接收三个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理函数。
DOM 中某个事件触发时，所有与该事件相关的信息都保存在一个名为event 的事件对象中。正常情况下，event 对象是传给事件处理函数的唯一参数，事件处理函数从中获取与事件相关的各种信息[9]。
1.5 this关键字
JavaScript 中的this 是代表函数运行时自动生成的一个内部对象，其只能在函数内部使用，随着函数使用场合的不同，this 的值会发生变化。通常有以下五种情况[10]：
1)若函数前面没有对象去调用，那么this 指向对象Window。在严格模式下，this指向undefined；
2) 若函数作为对象的属性调用时，this 指向该对象；
3)若函数由new 运算符调用时，函数里的this 就指向new 运算符返回的这个对象。
4) 事件处理函数中的this 指向监听该事件的对象；
5)箭头函数内部的this 指向是固定的，为定义时的上层作用域。
JavaScript中的函数也是对象，该对象的bind方法可改变this的指向。
1.6 JavaScript对象通信
通常情况下，对象之间通信有以下三种方式：
1)利用通信对象的双向包含来实现对象的通信。但从软件工程角度看，这是的处理方式是非常不好的。因为很多情况下这种包含关系有悖常理。例如，房间有门很正常，但门中有房间就不可思议了。
2)利用定制事件来实现对象的通信。对象注册定制事件的监听器，事件触发后对象就能接收到事件并做相应处理。
3)利用回调函数实现对象通信。包含对象定义回调函数，被包含对象在指定事件的处理程序中调用该回调函数。
2 DOM综合实验项目设计与实现
2.1 DOM综合实验项目功能
该综合实验项目实现了简单的开盲盒功能，用户可以设置盲盒的个数，程序生成设定数目的盲盒并将礼物随机放入各个盲盒之中。用户点击所选择的盲盒，盲盒中的礼物及其价值会显示出来。
2.2 DOM综合实验界面设计
根据项目功能，系统的用户界面应包括：输入盲盒个数的文本输入框；重新加载盲盒的按钮；代表盲盒的图片以及必要的提示文本。具体的界面如下图2所示。
图2 系统用户界面
2.3 DOM综合实验类设计
综合实验项目的主要目的是加深学生对关键知识点的理解，培养学生综合运用所学知识解决问题的能力。因此，类设计方面要尽可能简单，避免出现复杂类设计影响学生理解关键知识点的问题。根据综合实验项目的功能设计了App 和Present 两个类。类App负责创建用户界面，类Present负责盲盒创建及盲盒点击事件的处理。系统的类图[11-12]如图3所示。
图3 系统的类图
图3中类App的构造方法(constructor)涉及盲盒创建和绑定函数this 指针等知识点。_onPresentOpened方法是盲盒打开后的回调函数，涉及DOM操作HTML元素、DOM 事件和JavaScript 对象通信等知识点。类Present 的构造方法(constructor)涉及DOM 添加HTML元素、DOM 事件和绑定函数this 指针等知识点。_openPresent方法实现盲盒中礼物显示和盲盒打开后回调函调用等功能，涉及DOM 操作HTML 元素、DOM事件和JavaScript 对象通信等知识点。以上类的方法中，各个关键知识点重复出现，有利于学生理解和掌握。
2.4 DOM综合实验主要方法和界面的实现
类Present构造函数的实现代码如下：
构造函数的参数containerElement 是DOM 对象，为盲盒(Present类实例）的容器；参数present是包含代表盲盒中礼物的图片路径(name)和礼物的价值属性(value)的对象；参数onOpenCallback 为回调函数对象，盲盒打开事件发生时被调用。
代码this. image. addEventListener(′click′, this._open Present)为盲盒(this.image)的单击事件添加事件处理函数this._openPresent。缺省情况下函数this._openPresent 的this 指针指向this.image。代码this._openPresent = this._openPresent.bind(this)将函数this._openPresent的this指针绑定为Present类的实例。
类Present的成员函数_openPresent是盲盒单击事件的处理函数，代码如下所示：
类App 的成员函数_fillPresentContainer 的作用是调用Present 类的构造函数创建盲盒并将他们保存在属性presents中。具体代码如下所示：
类App 的成员函数_onPresentOpened，定义盲盒与App类实例通信的回调函数，具体代码如下所示：
实现图2 所示系统用户界面的HTML文档(index.html)中的代码如下：
3 DOM综合实验项目运行与调试
在浏览器中打开2.4中的index.html文档，运行该综合实验项目，浏览器对HTML文档渲染后的结果如图2所示。将输入框中盲盒的个数由3改为2，然后单击Reload Presents 按钮，系统的运行结果如图4所示。单击图4中的第二个盲盒，盲盒的显示会变为其中礼物的图片。文字显示由“Click a present to open it:”变为“Enjoy your present!Price is$[数值]”，显示如图5所示。盲盒打开之后，其他盲盒和打开盲盒中的礼物都不会再响应鼠标单击事件。
图4 系统的运行结果
图5 盲盒打开后的显示
在Present的构造函数中用于绑定_openPresent函数this 指针的语句：this._openPresent=this._openPresent.bind(this)之前添加注释符号，重新运行该综合实验项目。然后单击界面中的任意一个盲盒，程序运行会出错，错误提示如图6所示。
图6 错误提示
图6 中的错误是执行盲盒单击事件处理程序_openPresent 成员函数中的this.image.src = this.present.name 语句，访问this 所指对象present 成员的name属性时发生的。产生该错误的原因是：_openPresent函数是事件处理程序，缺省情况下该函数的this 指针指向监听事件的DOM对象，即Present实例的成员image。然而，image 对象并没有present 成员，所以访问present 成员的name属性会出错。为了确定发生错误时this 指针所指向的对象，在Present 的_openPresent成员函数的函数体的第一行插入代码console.log(′this->′,this)。重新运行该综合实验项目，单击界面中的任意一个盲盒，程序运行都会出现错误，错误提示和this指针向对象如图7所示。
图7 错误提示和this指针指向的对象
图7 显示，此时Present 的_openPresent 成员函数的this 指针指向img 元素对应的DOM 对象，与前述分析一致。
去掉类Present的构造函数中绑定_openPresent函数this 指针的语句之前的注释符号，重新运行该综合实验项目。然后单击界面中的第二个盲盒，程序正确运行，运行结果和this指针向对象如图8所示。
图8 盲盒打开后的显示this指针指向的对象
图8 显示，此时Present 的_openPresent 成员函数的this指针指向类Present的实例，该实例有present成员，name是present的成员之一。
4 结论
文档对象模型是Web 前端开发课程的重点内容之一，涉及知识点多，如DOM 事件处理和this 指针等内容，学生掌握起来比较困难。本文设计了一个类似于开盲盒的综合实验项目，将多个知识点集成在一个实验项目中，并突出了事件处理、对象通信和this指针等难点的分析。该实验具有一定趣味性，容易激发学生的学习兴趣，有助于学生掌握相应难点。通过该项目的实现和调试能够增强学生的实践动手能力。学生以此项目为基础，通过不断丰富系统的功能，有利于提高其利用所学知识解决实际问题的工程能力。
