《web前端技术》(赵敏)003-0教案 第22课 DOM

PAGE1PAGE1PAGE2PAGE2

课题第22课DOM课时2课时（90min）教学目标知识技能目标：（1）了解DOM（2）熟悉HTML元素操作和DOM节点操作的属性和方法素质目标：（1）探索DOM的相关知识，增强自主学习意识（2）加强实战演练，提升专业技能，增强实践能力教学重难点教学重点：DOM、HTML元素操作的属性和方法教学难点：DOM节点操作的属性和方法教学方法问答法、讨论法、讲授法、实践练习法、演示法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂教学设计第1节课：→→→传授新知（20min）→实战拓展（20min）第2节课：→传授新知（15min）→实战拓展（20min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，把和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务了解DOM【学生】完成课前任务通过课前任务，让学生提前了解了解DOM，为课堂上学习相关知识点做准备考勤（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（3min）【教师】提出问题什么是DOM？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识DOM是JavaScript中存在的一种对象模型，表示文档对象模型。通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）11.1DOM11.1.1认识DOM【教师】讲解DOM的概念DOM是由W3C（万维网联盟）组织定义的一个标准，它定义了访问文档的标准，即“W3CDOM是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”…（详见教材）DOM是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、样式和属性等。…（详见教材）例如，现有一个简单的HTML文档，该文档对应的DOM树如图“HTML文档的DOM树”所示。代码如下：…（详见教材）【教师】展示图“HTML文档的DOM树”并讲解常见节点类别图中展示了DOM树中的各节点，以及节点间的关系。下面简单介绍常见节点类别。（1）根节点：…（详见教材）（2）父节点：…（详见教材）（3）子节点：…（详见教材）（4）兄弟节点：…（详见教材）（5）叶节点：…（详见教材）在DOM中，经常操作的节点主要有document节点、元素节点（包括根元素节点）、属性节点和文本节点。…（详见教材）【学生】聆听、记录、理解11.1.2HTML元素操作【教师】讲解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元素的相关属性，…（详见教材）【教师】展示表“操作元素属性的属性和方法”并讲解其中内容【例11-4】操作元素属性（以下提供部分代码），…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示例子，使学生了解DOM的概念、HTML元素操作实战拓展（15min）【教师】要求学生自行练习例11-1、11-2、11-3、11-4，可更改其中元素的操作，也可更改其中的元素，有疑问可互相讨论，或询问老师通过练习例子，锻炼学生的编程能力第二节课问题导入（5min）【教师】提出问题DOM节点有哪些操作？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（15min）11.1.3DOM节点操作【教师】展示图“Array对象常用属性和方法”讲解数组的属性和方法1．获取节点在DOM中，HTML文档是树状结构，且文档中的元素、属性、文本等不同的内容可以转换为DOM树的节点，不同的节点之间存在相互关系。【教师】展示表“获取节点的常用属性”并讲解其中内容【例11-5】获取节点（以下提供部分代码），…（详见教材）id属性值为content的div元素拥有7个子节点。使用firstChild、lastChild、previousSibling和nextSibling属性获取的都是文本节点（#text），这是因为换行符也属于文本节点，…（详见教材）2．增加节点【教师】展示表“增加节点的常用方法”并讲解其中内容【例11-6】增加节点（以下提供部分代码），…（详见教材）3．删除节点除了获取和增加节点外，DOM还提供了删除节点的方法。删除节点的方法主要有removeChild()和removeAttributeNode()。removeChild()方法用于删除指定元素节点；removeAttributeNode()方法用于删除指定属性节点。【例11-7】删除节点（以下提供部分代码），…（详见教材）【学生】聆听、记录、理解、观看效果通过教师的讲解和演示，让学生掌握DOM节点操作实战拓展（20min）项目要求:红色区域是我们的“商品区”，下面蓝色部分是“购物车”。当我们点击添加按钮时，对应的商品就会出现在蓝色区域。效果如下图：【教师】先演示下最终效果，再讲解做题思路，编写较为重要和学生容易出错的部分程序，引导学生思考，再要求学生完成以上习题，有疑问可互相讨论或咨询老师，学生制作完成后教师再讲解html部分：CSS部分：JS部分：思路：代码的逻辑并不复杂，要想实现这样的效果。首先，我们先获取到所有按钮元素。varbtn1=document.getElementsByClassName("btn1");然后我们再利用for循环为按钮添加点击事件。先获取被点击的元素vardom=e.target;然后得到按钮的前一个兄弟节点，即商品信息所在标签。varpredom2=dom.previousElementSibling;获取商品后，我们还要得到它的标签类型，这样我们添加到下面的时候可以让结构保持一致。varpredom2_n=predom2.nodeName.toLowerCase();生成标签，对应商品信息的标签名。例如<a>商品1</a>，执行下面这段代码，a就是一对标签。vara=document.createElement(predom2_n);然后利用innerHTML获取到商品的内容给到刚刚创建的标签。a.innerHTML=predom2.innerHTML;选择<divclass='cart'>下的ul标签。varcart_ul=document.querySelector(".cart>ul");创建li标签varoLI=document.createElement("li");将节点添加到oLI下。oLI.appendChild(a);再将oLI节点添加到cart_ul下。cart_ul.appendChild(oLI);讨论、制作项目通过思考和练习习题，使学生巩固DOM的相关知识，锻炼学生的动手操作能力课堂小结（3min）【教师】简要总结本节课的要点本节课主要介绍了DOM的相关知识。通过本节课的学习，学生应重点掌握以下内容。（1）DOM是JavaScript中存在的一种对象模型，表示文档对象模型。它是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、样式和属性等。（2）在JavaScript中，通常利用document对象中的属性和方法实现HTML元素操作和DOM节点操作。【学生】总结回顾知识点总结知识点，使学生牢固掌握DOM的相关知识作业布置（2min）【教师】布置课后作业个人作业：完成以下习题，并代码打包之文旌课堂APP题目：制作页面版的资产折旧计算器。需求：用户在页面上录入资产原价、折旧率以及计算年限，单击“计算”按钮后，计算该资产的折旧价值并显示在页面上。效果如下图：【学生】完成课后任务通过课后作业复习巩固学到