Web程序开发：第15章 DOM操作.pdfVIP

第15章 DOM操作 15.1 概述 15.2 HTML DOM 树 15.3 DOM 编程接口 15.4 表格DOM操作 15.5 表单DOM操作 15.6 BOM （浏览器对象） 15.7 Cookie操作 15.8 课堂作业 15.1 概述 DOM （Document Object Model）是W3C （万维网联盟）的标准。定义 了访问HTML 和XML 文档的标准。“W3C 文档对象模型 （DOM）是中 立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容 、结构和样式。” DOM 标准被分为3 个不同的部分： – 核心DOM - 针对任何结构化文档的标准模型 – XML DOM - 针对XML 文档的标准模型 – HTML DOM - 针对HTML 文档的标准模型 • HTML 的标准对象模型 • HTML 的标准编程接口 HTML DOM 定义了所有HTML 元素的对象和属性，以及访问它们的方法。 HTML DOM 是关于如何获取、修改、添加或删除HTML 元素的标准。 15.2 html dom树 HTML DOM 定义了访问和操作HTML 文档的标准方法。 DOM 将HTML 文档表达为树结构。 15.2.1 DOM节点 • 整个文档是一个文档节点 • 每个HTML 元素是元素节点 • HTML 元素内的文本是文本节点 • 每个HTML 属性是属性节点 • 注释是注释节点 通过HTML DOM，树中的所有节点均可通过JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。 15.2.1 DOM节点-续1 节点树中的节点彼此拥有层级关系。父（parent）、子（child ）和同胞（ sibling ）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被 称为同胞（兄弟或姐妹）。 – 在节点树中，顶端节点被称为根（root） – 每个节点都有父节点、除了根（它没有父节点） – 一个节点可拥有任意数量的子 – 同胞是拥有相同父节点的节点 15.2.1 DOM节点-续2 html 节点没有父节点；它是根节点 head 和body 的父节点是html 节点 文本节点Hello world! 的父节点是p 节点 并且： html 节点拥有两个子节点：head 和body head 节点拥有一个子节点：title 节点 title 节点也拥有一个子节点：文本节点 DOM 教程 h1 和p 节点是同胞节点，同时也是body 的子节点 并且： head 元素是html 元素的首个子节点 html body 元素是html 元素的最后一个子节点 head h1 元素是body 元素的首个子节点 titleDOM 教程/title p 元素是body 元素的最后一个子节点 /head body 可通过节点的innerHTML h1DOM 第一课/h1 属性来访问文本节点的值 p id=pFirstHello world!/p /body /html 15.3 DOM 编程接口 通过DOM编程接口： • JavaScript 能够改变页面中的所有HTML 元素 • Jav