Javascript_DOM编程艺术翻译版

第 3 章 DOM 本章内容 ● 节点的概念 ●四个非常实用的 DOM 方法： getElementById 、getElementsByTagName 、getAttribute 和 setAttribute 终于要与 DOM面对面了。能够向大家介绍 DOM是笔者的荣幸，我非常乐于带 领大家通过 DOM的眼睛去看世界。 3.1 文档： DOM 中的 “ D” DOM是“Document Object Model ”（文档对象模型）的首字母缩写。如果没 有 document（文档）， DOM也就无从谈起。当创建了一个网页并把它加载到 Web 浏览器中时， DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档 对象。 在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以 用来称呼任何一种客观存在的事物。 但在程序设计语言中， “对象”这个词的含 义非常明确和具体。 3.2 对象： DOM 中的 “ O” 在上一章的末尾，我们向大家展示了几个 JavaScript 对象的例子。你们应 该还记得，“对象” 是一种独立的数据集合 。与某个特定对象相关联的变量被称 为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方 法。 JavaScript 语言里的对象可以分为三种类型： ●用户定义对象 （user-defined object ）：由程序员自行创建的对象。 本 书 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 不讨论这种对象。 ●内建对象 （native object ）：内建在 JavaScript 语言里的对象，如 Array 、Math 和 Date 等。 ●宿主对象 （host object ）：由浏览器提供的对象。 在 JavaScript 语言的发展初期，程序员在编写 JavaScript 脚本时经常需要 用到一些非常重要的宿主对象，它们当中最基础的是 window对象。 window 对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为 B OM（浏览器对象模型）——但我觉得称之为 Window Object Model （窗口对象模 型）更为贴切。 BOM向程序员提供了 window.open 和 window.blur 等方法，你们 在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成 灾的地步——几乎都是由这些方法负责创建和处理的。难怪 JavaScript 会有一 个不好的名声！ 值得庆幸的是，在这本书里我们不需要与 BOM打太多的交道。我们将把注意 力集中在浏览器窗口的内部而不是浏览器窗口本身。 我们将着重探讨如何对网页 的内容进行处理，而用来实现这一目标的载体就是 document对象。 在本书的后续内容里，我们将尽可能地只讨论 document 对象的属性和方法。 现在，我们已经对 DOM中的字母“ D”（ document，文档）和字母“ O”（ ob ject ，对象）做了解释，那么字母“ M”又代 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 着什么呢？ 3.3 模型： DOM 中的 “ M” DOM中的“ M”代表着“ Model”（模型），但说它代表着“ Map”（地图）也 未尝不可。 模型也好，地图也罢， 它们的含义都是某种事物的表现形式。 就像一 个模型火车代表着一列真正的火车、 一张城市街道图代表着一个实际存在的城市 那样， DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前 网页的地图（或者说模型），而我们可以通过 JavaScript 去读取这张地图。 既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和 使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于 DOM。要 想从 DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。 DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念）， 这是我们理解和运用这一模型的关键。更具体地说， DOM把文档表示为一棵家谱 树。 家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并 使用 parent （父）、 child （子）、 sibling （兄弟）等记号来表明家族成员之 间的关系。家谱树可以把一些相当复杂的关系简明地表示出来： 一位特定的家族 成员既是某些成员的父辈， 又是另一位成员的子辈， 同时还是另一位成员的兄弟。 类似于人类家族谱系的情况，家谱树模型也非常适合用来表示一份用 (X)HTM L 语言编写出来的文档。 请看下面这份非常基本的网页，它的内容是一份购物清单。 这份文档可以用图 3-1 中的模型来表示。 我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些 元素构成的，还可以让我们了解为什么图 3-1 中的模型可以如此完美地把它表示 出来。在对 Doctype 做出声明后， 这份文档首先打开了一个 标签，而这个 网页里的所有其他元素都包含在这个元素里。 因为所有其他的元素都包含在其内 部，所以这个 标签既没有父辈， 也没有兄弟。如果这是一棵真正的树的话， 这个 标签显然就是树根。 图 3-1 把网页中的元素表示为一棵家谱树 这正是图 3-1 中的家谱树以 html 为根元素的原因。毫无疑问， html 元素完 全可以代表整个文档。 如果在这份文档里更深入一层，我们将发现 和两个分枝。它们 存在于同一层次且互不包含，所以它们是兄弟关系。它们有着共同的父元素 ，但又各有各的子元素，所以它们本身又是其他一些元素的父元素。 元素有两个子元素： 和