教案.docx
《教案.docx》由会员分享，可在线阅读，更多相关《教案.docx（22页珍藏版）》请在冰点文库上搜索。
教案
章节题目
HTMLDOM初步
课型
讲授+上机
教学目的
学习DOM知识；节点的访问、创建、修改等
重点
节点的访问、创建、修改
难点
节点的访问、创建、修改
参考书目
1.《Web技术导论》第二版郝兴伟；
2.《Web2.0编程与实训》刘怀亮等
3.《21天学通JavaScript》顾宁燕等
4.《
教具
教学后记
教学过程
备注
基本内容：
DOM基本概念
节点的访问、创建、修改等
【3】P302~317例题为主（包括视频，60%处那个…），参见【4】。
详细内容：
1.节点层次；
2.访问节点，[范例15-1]；
3.处理节点属性，范例15-3；
4.访问指定节点——通过name或ID访问而不是遍历。
范例15-4及视频60%处的，代码如下：
1
2
3
4
nodes=document.getElementsByTagName（“MyTag”）;
alert（nodes.length）;
还有：
视频…
5.创建节点
6.修改节点
7.
实验内容：
1.【3】P318~319综合练习；
2.在两个文本框中输入数字，单击确定按钮时，创建一个对应数据行和列的表格。
【提示】鼠标单击事件，写响应鼠标单击事件的代码。
实验步骤：
1.设计页面内容；
2.DTD文档
3.建立XML数据文档；
4.建立XSL文档；
5.浏览器显示
习题与思考：
1.简述XML与HTML关系？
2.详述以下每行代码的含义：
Functionmsg（）{
varP=document.createElement（‘P’）;
varText=document.createTextNode（）’Hello!
’;
P.appendChild（Text）;
document.body.appendChild（P）;
}
3.简述DOM树的结构。
4.举例说明如何实现对节点的访问、创建、增添等；以及如何改变节点属性等？
5.举例说明XMLDOM的NodeList对象的item（Index）方法？
理论与实践，两次课内容！
JavaScript的核心ECMAScript描述了该语言的语法和基本对象；
DOM描述了处理网页内容的方法和接口；
BOM描述了与浏览器进行交互的方法和接口。
DOM
DOM的概念及历史
文档对象模型（DocumentObjectModel：
DOM）
混乱的历史
W3CDOM
HTMLDOM对象
XMLDOM
DOM树及节点
在W3CDOM中，每个容器、独立的元素，或文本块都被看着一个节点，节点是W3CDOM的基本构建块。
元素节点（elementnode）
文本节点（textnode）
属性节点（attributenode）
DOM节点的访问修改等
附录：
（摘自W3school）
HTMLDOM对象
HTMLDOM定义了访问和操作HTML文档的标准方法。
HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
HTMLDOMDocument对象
Document对象
◆每个载入浏览器的HTML文档都会成为Document对象。
◆Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
◆提示：
Document对象是Window对象的一部分，可通过window.document属性对其进行访问。
◆IE:
InternetExplorer,F:
Firefox,O:
Opera,W3C:
W3C标准.
◆Document对象集合
集合
描述
IE
F
O
W3C
all[]
提供对文档中所有HTML元素的访问。
4
1
9
No
anchors[]
返回对文档中所有Anchor对象的引用。
4
1
9
Yes
applets
返回对文档中所有Applet对象的引用。
-
-
-
-
forms[]
返回对文档中所有Form对象引用。
4
1
9
Yes
images[]
返回对文档中所有Image对象引用。
4
1
9
Yes
links[]
返回对文档中所有Area和Link对象引用。
4
1
9
Yes
◆Document对象属性
属性
描述
IE
F
O
W3C
body
提供对
元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的
升级会员 