阶段性总结_javascript第六讲阶段性总结_javascript第六讲.pdfVIP

qilei@ 2-1 WebWeb 基础基础 WebWeb 基础基础 模块模块：JavaScript：JavaScript 模块模块：：JavaScriptJavaScript 第六第六讲讲 HTML DomHTML Dom 对象对象 第六第六讲讲 HTML DomHTML Dom 对象对象 1. 课程目标 1-1 2. 课程安排 2-1 2.1. HTML DOM 简介 2-1 2.2. HTML DOM 节点 2-2 2.3. HTML Dom 节点树 2-2 2.4. HTML DOM 访问节点 2-4 2.5. HTML DOM 节点信息 2-6 3. 课程总结, 3-7 3.1. 重点和难点分析 3-7 3.2. 常见问题 （FAQ） 3-8 4. 课后习题 4-8 4.1. 课后习题 4-8 1.1. 课程目标课程目标 1.1.课程目标课程目标 • 理解 HTML DOM 2. 课程安排课程安排 课程安排课程安排 . HTML DOMHTML DOM 简介简介 . HTML DOMHTML DOM 简介简介 HTML DOM(Document Object Model) 定义了访问和操作 HTML 文档的标 准方法。 qilei@ 2-2 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 . HTML DOMHTML DOM 节点节点 （重点（重点） ） . HTML DOMHTML DOM 节点节点 （（重点重点）） HTML 文档中的每个成分都是一个节点 ，例如： • 整个文档是一个文档节点 （document） • 每个 HTML 标签是一个元素节点(element) • 包含在 HTML 元素中的文本是文本节点(text) • 每个 HTML 属性属于一个属性节点。(attribute) HTML 文档中的所有节点组成了一个文档树(或节点树)，树起始于文档节点，并 由此继续伸出纸条，直到文本节点。 . HTML DOMHTML DOM 节点树节点树 . HTML HTML DOMDOM 节点树节点树 一颗节点树种的所有节点彼此都是有关系的。 例如 ： html head titleDOM Tutorial/title /head body h1DOM Lesson one/h1 pHello world!/p /body /html 上面所有的节点彼此间都存在关系。 qilei@ 2-3 除文档节点之外的每个节点都有父节点。举例，head 和 body 的父节 点是 html 节点，文本节点 Hello world! 的父节点是 p 节点。 大部分元素节点都有 子节点。比方说，head 节点有一个子节点：title 节 点。 title 节点也有一个子节点：文本节点 DOM Tutorial。 当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1 和 p 是同辈，因为它们的父节点均是 body 节点