JavaScript前端开发操作教学设计.pdfVIP

课题计划

第7章DOM5学时

名称学时

DOM（DocumentObjectModel）文档对象模型可以用于完成HTML和XML文档的操

内容作。其中，在JavaScript中利用DOM操作HTML元素和CSS样式则是最常用的功能

分析之一，例如，改变盒子的大小、栏的切换、购物车等。本章将针对如何在JavaScript

中进行DOM操作进行详细讲解。

1.了解什么是DOM

教学目

标及基2.掌握元素与样式的操作

本要求

3.掌握节点的操作

教学

获取元素、元素操作、节点操作

重点

教学

获取节点、节点追加

难点

教学采用课堂讲授为主

教学⚫概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。

方式

⚫功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。

⚫综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。

第一学时

（认识DOM、获取元素、内容操作、属性操作、样式操作）

一、回顾上节课内容

（1）对上节课布置的作业以及学生问题进行答疑解惑。

（2）回顾前面学过的内容，引出本节课。

教面讲解了BOM对象的使用，BOM对浏览器进行操作，而DOM用来对文档

学进行操作，因此本节课将会讲解如何利用DOM对象来对文档进行操作。

过（3）明确学习方向。

程➢了解什么是DOM，DOM的版本和发展。

➢掌握HTML节点树的概念，能够说出节点之间的关系。

➢认识常用的DOM对象，能够区分元素与节点。

➢掌握节点的类型。

二、知识讲解

1.什么是DOM

课题计划

Chapter7DOM5学时

名称学时

DOM(DocumentObjectModel)documentobjectmodelcanbeusedtocompletetheoperationofHTMLandXML

documents.

内容do.Amongthem,usingDOMtooperateHTMLelementsandCSSstyinJavaScriptisthemostcommonlyused

function.

分析One,forexample,changingthesizeofthebox,switchingthetabbar,shoppingca