第二十一讲 JavaScript HTML DOM 对象(二).pdfVIP

JavaScript HTML DOM ( ) 第二十一讲 对象 二 一、 HTML DOM 对象概述 HTML 文档对象模型（HTML Document Object Model ）定义了访问和处理 HTML 文 档的标准方法。通过 JavaScript 可以重构整个 HTML 文档。包括添加、移除、改变或重排页面 上的项目。 要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。 这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对 象模型来获得的。 在 1998 年，W3C 发布了第一级的 DOM 规范。DOM 可被 JavaScript 用来读取、改变 HTML XHTML XML HTML 、 以及 文档。这个规范允许访问和操作 页面中的每一个单独的 元素。目前所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。 1. 相关概念 1 节点 DOM 是这样规定的：整个文档是一个文档节点；每个 HTML 标签是一个元素节点； 包含在 HTML 元素中的文本是文本节点；每一个 HTML 属性是一个属性节点；注释属于 注释节点。 因此根据 DOM 的规定，我们可以认为在HTML 文档中的每个成分都是一个节点。 2 Node 层次 节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树） 。 HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由 此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树（节点树）： 3 文档树（节点数） 请看下面这个 HTML 文档： html head titleDOM Tutorial/title /head body h1DOM Lesson one/h1 pHello world!/p /body /html 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例，head 和 body 的父节点是 html 节点，文本节点 Hello world! 的父节点是 p 节点。 head title title 大部分元素节点都有子节点。比方说， 节点有一个子节点： 节点。 节点也有一个子节点：文本节点 DOM Tutorial。 当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1 和 p是同 辈，因为它们的父节点均是 body 节点。 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以 此类推。比方说，所有的文本节点都是 html节点的后代，而第一个文本节点是 head 节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比 方说，所有的文本节点都可把 html 节点作为先辈节点。 2. 查找并访问节点 你可通过下面的方法来查找希望操作的元素： A. 通过使用 getElementById() 和 getElementsByTagName() 方法 B. 通过使用一个元素节点的 parentNode 、firstChild 以及 lastChild 属性 1 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档