2024年3月6日发(作者：)

2项目名称任务名称商品放大镜DOM对象之的基本概念。2.核心DOM的对象类型。nt对象的基本概念、属性和方法M对象能力目标：1.具备问题分析的能力。2.具备使用学到的知识和技能解决实际项目问题。知识目标：计划学时2教学内容教学目标1.掌握DOM及核心DOM的对象类型。2.掌握HTMLDOM的基本概念和HTMLDOM的基本属性和方法。素质目标：1.培养学生信息搜集和自学能力。2.培养学生团结合作、互帮互助的能力。的核心对象类型M的节点类型HTMLDOM的节点类型的理解和使用教学过程教学重点教学难点一、情景导入张华同学特别喜欢关注国产软件和国产电脑的新技术和新产品，听说他喜欢的品牌最近又发布了新品，就登录网站查看，在浏览商品信息时，发现如图6-1所示的效果，当将鼠标在小图中移动时，右边的放大图片也在相应的移动。李老师告诉他，这是各大电商网站为了提高用户体验，在商品上使用了放大镜效果，便于消费者体验。张华同学迫不及待地想编写这样的程序，可是他发现自己遇到了很多困难，不知道怎么获取图片、放大镜怎么显示、放大镜怎么移动等等。李老师告诉他，这需要学习文档对象模型（DocumentObjectModel，DOM）相关知识，这是一种处理HTML文档的应用程序接口，它的作用是将网页转为JavaScript对象，从而可以使用Javascript对网页进行各种操作如增删内容等。这是学习JavaScript的最关键的内容，张华明白“纲举目张”的道理，学好DOM对象的相关知识，至关重要，于是制定了详细的学习计划。

2第1步：认识DOM对象的基础知识。第2步：理解HTMLDOM的基本概念。第3步：学会操作元素，解决实际问题。第4步：学会操作节点。二、任务实施掌握DOM对象和HTMLDOM对象的基本概念，HTMLDOM对象的分类和属性方法。（一）认识DOM对象文档对象模型（DocumentObjectModel，DOM）定义了访问HTML和XML文档的标准，DOM是通用型的标准，为所有标记语言而设计，是将标记语言文档的各个组成部分封装为对象，可以使用这些对象对标记语言文档进行CRUD(增加Create、检索Retrieve、更新Update和删除Delete)动态操作。DOM是中立于平台和语言的接口，W3CDOM标准被分为3个不同的部分：1.核心DOM——针对任何结构化文档的标准模型核心DOM提供了操作文档的公有属性和方法，就相当于鼻祖。它可操作一切结构化文档的API，包括HTML和XML。——针对XML文档的标准模型HTMLDOM是专门操作HTML文档的简化版DOMAPI仅对常用的复杂的API进行了简化，对核心DOM进行了在HTML方面的拓展。M——针对HTML文档的标准模型XMLDOM提供了所有XML元素的对象和属性，以及访问方法，与HTMLDOM类似。在JavaScript中，一般是使用的是HTMLDOM，在后面的章节中不专门说明的话，DOM指的就是HTMLDOM。（二）核心DOM对象模型HTMLDOM和XMLDOM都是核心DOM对象模型的扩展和封装，核心DOM对象模型的对象HTMLDOM和XMLDOM都可以使用。核心DOM的对象主要以下几个。nt:文档对象t:元素对象ute:属性对象:文本对象t:注释对象：节点对象其中，Node节点对象是以上5个对象的父对象，也就是说他们之间的关系如图6-2所示。

2图6-2核心DOM对象模型【任务实践6-1】：枚举Node对象——核心DOM对象任务描述：列举文档中的Node对象。（1）任务分析①根据任务描述要求，要列举文档中的Node对象，使用odes来获取。②通过控制台显示最后的结果。（2）实现代码

核心DOM对象

在上述代码中，使用odes获取所有节点对象。（3）实现效果实现效果如图6-3所示。（三）认识HTMLDOM

2HTMLDOM是对核心DOM进行了扩展和封装，使其对HTML文档的处理更加方便和针对性，功能更加强大。核心DOM的方法在HTMLDOM中基本都能使用。从原理上来看，每当通过浏览器打开一个网页，DOM会根据这个网页创建一个文档对象，这就是DOM文档对象模型，是一个树型结构模型。在这个树型结构模型中，网页中的元素与内容表现为一个个相互连接的节点。DOM的最小组成单位叫做节点(node)，以树节点的方式表示文档中的各种内容，如下列代码所示。

一级标题

文档段落

上述代码，在DOM中会根据HTML文档中标签的嵌套层次将HTML文档处理为DOM节点树，如下图所示。HTML文档DOM节点树（1）根节点，处于节点树的最项层，如html。（2）父节点，一个节点之上的节点，如head的父节点是html。（3）子节点，一个节点之下的节点就是该节点的子节点，如body的子节点是h1和p。（4）兄弟节点，处于同一层次的节点，如head和body就是兄弟节点。（5）叶子节点，节点树最底层的节点，如“标题”“文档段落”等文本。（四）HTMLDOM节点类型根据W3C标准规范，DOM树中的节点分为12种类型。其中常用的节点类型是文档、元素、属性、文本和注释5种，如下表所示。节点类型ElementAttributeTextCommentID1238说明元素节点，HTML文档标签对，如

等属性节点，如标签的href=“xxx”属性文本节点，元素节点中的内容，如“p”节点中的“文档段落”就是文本节点注释节点，表示文档中的注释

2Document9文档节点，表示整个文档对象【任务实践6-2】：节点类型——HTMLDOM节点类型任务描述：查看中的节点类型（1）任务分析①根据任务描述要求，要查看文档中的节点类型，通过odes[i].nodeType来获取。②通过控制台显示最后的结果。（2）实现代码一级标题文档段落

（3）实现效果实现效果如图6-6所示。图6-6查看节点类型（五）HTMLDOM对象分类在HTMLDOM对象中，最常用的是节点（node）对象、元素（Element）对象、文档（Document）对象以及一些比较特殊常用元素对象，每个对象都有自

2己的属性和方法。1．节点（Node）对象节点对象是最核心的对象，用来表示DOM树中的节点（node）。2．元素（Element）对象元素对象是最基础的对象，用来表示HTML文档中任意元素。Element对象提供的属性和方法对DOM节点对象和HTML元素对象都适用。3．文档（Document）对象在HTMLDOM对象模型中的Document对象表示整个HTML文档对象。其继承和封装了核心DOM和属性和方法，所以核心DOM对象的方法和属性在HTMLDOM也可以正常使用。4．特定类型的HTML元素在BOM对象中也为不同类型的HTML元素定义了相应类型的元素对象，对象名称一般是标签名称，不过首字母大写。DOM也为这些对象提供了属性和方法。所以在DOM中，整个HTML文档元素都是对象。三、课后作业活动（一）掌握DOM对象的基本概念和核心DOM的分类（二）掌握HTMLDOM对象的基本概念、属性和方法，并通过实训掌握其知识点和技能点。四、课后总结与评价（一）通过作业实训活动，了解学生是否掌握DOM对象的基本用法。（二）根据学生做的实训案例，了解学生对DOM和HTMLDOM对象的掌握程度，分别给予不同的评价成绩和改进措施。