《web前端技术》 教案 第22课 DOM.docx

PAGE 6 PAGE 6 PAGE 7 PAGE 7 课题 第22课 DOM 课时 2课时（90 min） 教学目标 知识技能目标： （1）了解DOM （2）熟悉HTML元素操作和DOM节点操作的属性和方法 素质目标： （1）探索DOM的相关知识，增强自主学习意识 （2）加强实战演练，提升专业技能，增强实践能力 教学重难点 教学重点：DOM、HTML元素操作的属性和方法 教学难点：DOM节点操作的属性和方法 教学方法 问答法、讨论法、讲授法、实践练习法、演示法 教学用具 电脑、投影仪、多媒体课件、教材、 教学设计 第1节课：课前任务→考勤（2 min）→问题导入（3min）→传授新知（20min）→实战拓展（20min） 第2节课：问题导入（5min）→传授新知（15min）→实战拓展（20min）→课堂小结（3min）→作业布置（2min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务 了解DOM 【学生】完成课前任务 通过课前任务，让学生提前了解了解DOM，为课堂上学习相关知识点做准备 考勤 （2 min） 【教师】使用APP进行签到 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出问题 什么是DOM？ 【学生】思考、举手回答 【教师】通过学生的回答引入要讲的知识 DOM是JavaScript中存在的一种对象模型，表示文档对象模型。 通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣 传授新知 （25min） 11.1 DOM 11.1.1 认识DOM 【教师】讲解DOM的概念 DOM是由W3C（万维网联盟）组织定义的一个标准，它定义了访问文档的标准，即“W3C DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”…（详见教材） DOM是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、样式和属性等。 …（详见教材） 例如，现有一个简单的HTML文档，该文档对应的DOM树如图“HTML文档的DOM树”所示。代码如下： …（详见教材） 【教师】展示图“HTML文档的DOM树”并讲解常见节点类别 图中展示了DOM树中的各节点，以及节点间的关系。下面简单介绍常见节点类别。 （1）根节点：…（详见教材） （2）父节点：…（详见教材） （3）子节点：…（详见教材） （4）兄弟节点：…（详见教材） （5）叶节点：…（详见教材） 在DOM中，经常操作的节点主要有document节点、元素节点（包括根元素节点）、属性节点和文本节点。…（详见教材） 【学生】聆听、记录、理解 11.1.2 HTML元素操作 【教师】讲解HTML元素操作 在日常开发中，经常需要对HTML文档元素进行操作，包括获取元素，以及操作元素的内容、样式、属性等 1．获取元素 在JavaScript中，通常利用document对象中的方法来获取HTML文档中的元素。 【教师】展示表“document对象中获取元素的方法”并讲解获取元素的方法 …（详见教材） 【例11-1】 使用document对象的方法获取HTML中的元素 …（详见教材） NodeList对象和HTMLCollection对象都属于类数组。所谓类数组就是像数组一样的数据结构，它的取值方式同数组一样，可以从下标0开始获取，同时可以通过length属性获取该对象的长度。 操作元素内容 【教师】展示表“操作元素内容的属性和方法”并操作元素内容 …（详见教材） 【例11-2】 操作元素内容（以下提供部分代码），…（详见教材） 【课堂拓展】 使用document.write()和document.writeln()方法可修改整个body元素的内容，它们之间的唯一区别是document.writeln()方法会增加一个换行符。 3．操作元素样式 为了更好地满足用户对美观度的要求，Web开发过程中自然少不了设置元素样式。为了便捷地获取和修改元素样式，DOM提供了两种操作元素样式的方式，分别是通过style属性和class属性进行操作。 通过style属性操作元素样式。…（详见教材） 【教师】展示表“常见的style属性及说明”并讲解其中内容 通过class属性操作元素样式。…（详见教材） 【教师】展示表“classList对象的属性和方法”并讲解其中内容 【例11-3】 操作元素样式（以下提供部分代码），…（详见教材） 4．操作元素属性 为便于用户使用JavaScript获取、修改或删除指定HTML元