HTML文档对象模型(DOM)范例.ppt

JAVASCRIPT程序设计基础与范例教程 第八章 HTML文档对象模型（DOM） 课堂学习目标 了解DOM的体系结构； 理解DOM文档树的构建； 理解DOM接口的作用； 掌握DOM核心接口的功能用法； 掌握HTML DOM接口的功能用法； 8.1 文档对象模型概述 DOM是W3C（万维网联盟）的标准，它定义了操作HTML和XML文档的标准接口。DOM允许程序或脚本动态地访问文档的内容、结构和样式。 DOM核心API：访问结构化文档的标准模型 XML DOM：访问XML文档的标准模型 HTML DOM：访问HTML文档的标准模型 8.1 文档对象模型概述 1．浏览器对DOM标准的支持 2．树形结构表示文档 8.2 DOM核心接口 1．Node接口 2．Document接口 3．Element接口 4．Attr接口 5．CharacterData接口 6．Text接口 7．Common接口 8．接口定义的其他功能，以及其他DOM核心接口 8.2 DOM核心接口 【课堂案例8-1】：获取DOM树中的节点信息 【课堂案例8-2】：删除DOM树中的节点 【课堂案例8-3】：在DOM树中添加子节点 【课堂案例8-4】：替换DOM树中的节点 【课堂案例8-5】：复制DOM树中的节点 【课堂案例8-6】：获取节点的属性 【课堂案例8-7】：控制文本节点 【课堂案例8-8】：提取网页中的超链接地址 8.3 DOM HTML 1．HTMLDocument接口 2．HTMLElement接口 8.3 DOM HTML 【课堂案例8-9】：获取文档信息 【课堂案例8-10】：修改文档中的链接 【课堂案例8-11】：操作文档中的表格 【课堂案例8-12】：获取文本框中用户输入的内容 【课堂案例8-13】：获取单选框用户选择的内容 【课堂案例8-14】：获取复选框用户选择的内容 【课堂案例8-15】：控制下拉菜单 【课堂案例8-16】：判断用户选取的文件类型 【课堂案例8-17】：限制用户使用表单元素 8.3 DOM HTML 【课堂案例8-18】：验证表单数据 【课堂案例8-19】：为所有段落加边框 【课堂案例8-20】：选项卡效果 【课堂案例8-21】：Web相册 【课堂案例8-22】：修改网页背景色 【课堂案例8-24】：覆盖显示图片 【课堂案例8-25】：在网页中绘图 【课堂案例8-26】：在网页中绘图 结束