《JavaScript程序设计案例教程》教案 第7章 DOM.docx

PAGE10

PAGE10

PAGE9

PAGE9

课题

DOM

课时

4课时（180min）

教学目标

知识目标：

（1） 了解什么是DOM

（2）了解HTML节点树

（3）掌握常见HTML元素操作

（4）掌握常见DOM节点操作

能力目标：

（1）能够使用DOM提供的属性和方法操作元素属性

（2）具备DOM节点操作能力

（3）能够将DOM节点操作知识运用到实际场景中

素质目标：

（1） 发扬精益求精的工匠精神，养成严谨的科学作风

（2）了解国家政策，心系国家建设，树立技能报国的人生理想

教学重难点

教学重点：DOM的基本概念；HTML节点树结构；HTML元素的操作，如获取元素、设置内容和样式、操作属性等；DOM节点的操作，如获取、增加、删除节点；DOM操作流程

教学难点：不同浏览器对DOM操作的兼容性差异及应对方法；准确运用复杂的DOM节点操作，如创建、插入、删除节点并处理各种属性节点

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们打开浏览器的开发者工具，选择一个网页进行元素审查。观察网页的HTML结构和CSS样式，找出几个不同类型的元素节点，如文本节点、元素节点、注释节点等，然后在APP上进行讨论其作用和应用方法。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

大家在浏览网页的时候，有没有注意过当你点击一个按钮，网页上的某些内容会发生变化，或者一个弹窗会突然出现又消失？那大家有没有想过这些神奇的效果是怎么实现的呢？其实这背后的秘密武器就是DOM。那么，什么是DOM呢？

【学生】聆听、思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解DOM的基本知识，以及HTML元素操作和DOM节点操作的相关知识

7.1DOM介绍

7.1.1什么是DOM

DOM是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、属性及样式等。

DOM的前身为Netscape和微软创造的DHTML（动态HTML）。1998年10月，DOM1（DOMLevel1）正式成为W3C的推荐标准。随着网页技术的发展，DOM2（DOMLevel2）、DOM3（DOMLevel3）及DOM4（DOMLevel4）相继出现。DOM2发布于2000年11月，其在DOM1的基础上新增了节点操作方法，提供了访问和改变CSS样式的能力。DOM3发布于2004年4月，其在DOM2基础上新增了一些事件及加载与保存模块。目前DOM已经被大部分浏览器所支持。

7.1.2HTML节点树

HTML文档包含许多标签，标签加上其中的内容就组成了元素，这些元素共同组成了一个完整的树形结构。标签也称为节点（node），因此一个完整的HTML文档可以看作是由标签组成的节点树，各节点处在节点树的不同位置，具体示例如下：

……（详见教材）

上述代码中，不同的HTML标签有不同的作用，如title标签标识网页标题，a标签标识网页链接；不同的标签又具有不同的属性，如a标签具有href属性；不同的标签中也包含不同的内容。一般把标签称为元素节点；属性称为属性节点；标签中的内容，如文本称为文本节点；HTML文档中的注释称为注释节点。

?【教师】利用多媒体展示“HTML节点树”图片（详见教材），并进行讲解

HTML节点树展示了HTML节点树中的各节点及它们之间的关系，下面简单介绍常见节点类别。

（1）根节点：html是整个HTML节点树的根节点，一个HTML文档仅有一个html元素。

（2）子节点：子节点为某个元素节点的下级节点，如head和body为html元素的子节点，通常一个HTML文档仅有一个head和一个body元素。

（3）父节点：父节点为某个节点的上级节点，如head元素为meta元素和title元素的父节点。

（4）兄弟节点：兄弟节点为拥有同一个父节点的节点，如h1元素和div元素为兄弟节点。

（5）叶节点：叶节点为无子节点的节点，如文本节点hello。

7.2HTML元素操作

日常开发中，经常需要对HTML文档元素进行操作，如获取某个元素，修改某个元素内容，修改元素样式等。下面将对常见HTML元素操作进行介绍。

7.2.1获取元素

通常利用document对象中的方法来获取HTML中的元素。

?【教师】利用多媒体展示“获取元素的方法”表格（详见教材），并进行讲解