还剩1页未读,继续阅读
文本内容:
授课班级课时2授课地点元素操作之改变盒子内容HTML通过上学期的学习,同学们已经掌握了有关知识并具有制作静态HTML+CSS320高职网络授课学时学情分析页面的能力;同时,前面已经学习了脚本语言的基础知识和三大核心内JavaScript容的但对如何使用操作页面文档还不清楚BOM JavaScripto授课时间掌握获取元素的方法L知识目标、掌握对元素内容进行操作方法2教学目标能力目标培养学生的不同思维方式和深入探究能力素养目标培养学生的专注力和组织纪律性、获取元素、1教学重点、对元素内容进行操作2教学难点提供的属性和方法的实际应用DOM课堂讲授为主,将抽象具体化,配合教学、图例辅助讲解并演示如何应PPT教学方式用,重点内容总结运行原理教学资源1多媒体教室、传智高考教辅平台、课件课刖教学内容利用网络资源,传智高考教辅平台完成对元素操作内容的预习1HTML、传智高考教辅平台发布自学视频和学习任务元素操作11HTML教师活动、发布测试,了解学生对知识的掌握程度2课刖自学学生活动观看自学视频、完成测试练习、培养学生自主学习能力1设计意图、通过课前预习对元素操作内容有初步了解2HTML课中即义档对象模型,一套规氾文档内1DOM DocumentObject Model,容的通用型标准知识回顾教学内容、操作文档中的元素、节点、属性等2HTML教师活动提问、什么是、主要用途1DOM2DOM学生活动学生回答设计意图巩固前面所学知识教学内容利用元素操作改变盒子大小HTM L
一、展示改变盒子内容的页面并分析操作
二、知识点讲解、获取操作的元素
1、对象提供的方法1document方法说明返回对拥有指定id的第一个对象的引用document.getElementById返回带有指定名称的对象集合document.getElementsByName返回带有指定标签名的对象集合document.getElementsByT agNa返回带有指定类名的对象集合不支持meIE6〜8教师活动document.getElementsByClassN
2、document对象提供的属性ame知识讲解属性说明document.body返回文档的body元素document.documentElement返回文档的html元素返回对文档中所有Form对象引用document,formsdocument.images返回对文档中所有Image对象引用、对象方法3ElementgetElementsByTagNamegetElementsByClassName、新增的获取元素的方法4HTML5document.querySelectordocument.querySelectorAII、元素内容操作2属性、和innerHTML innerTexttextContent方法document.write
三、演示改变盒子内容代码操作style.box{width:50px;height:50px;background:#eee;margin:0auto;}/stylediv id=box class=,,boxx/divscriptvar box=document.getElementByldCbox;//保存用户单击盒子的次数var i=0;//处理盒子的单击事件box.onclick=function{++i;//单击次数为奇数,变大ifi%2{大;this.innerHTML=//单击次数为偶数,变小}else{this.innerHTML=,/b,;;/script学生活动认真听讲,积极回答问题提图学生的分析问题和解决问题的能力;并培养学生思维方式和深入探究设计意图能力课后>练习获取的元素操作1HTML教学内容、完成改变盒子大小案例的操作2教师活动辅助学生完成操作任务操作任务完成各种获取的兀素操作的方法练习;并正确输入完成修改盒子内HTML学生活动容的程序设计设计意图提高学生文本输入速度和正确率,培养学生程序设计思维教学反思。