第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）：由程序员自行创建的对象。本书不讨论这种对象。
  ●内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。
  ●宿主对象（host object）：由浏览器提供的对象。
在JavaScript语言的发展初期，程序员在编写JavaScript脚本时经常需要用到一些非常重要
的宿主对象，它们当中最基础的是window对象。
window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）——但我觉得称之为Window Object Model（窗口对象模型）更为贴切。BOM向程序员提供了window.open和window.blur等方法，你们在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这些方法负责创建和处理的。难怪JavaScript会有一个不好的名声！
值得庆幸的是，在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是document对象。
在本书的后续内容里，我们将尽可能地只讨论document对象的属性和方法。
现在，我们已经对DOM中的字母“D”（document，文档）和字母“O”（object，对象）做了解释，那么字母“M”又代表着什么呢？
3.3　模型：DOM中的“M”
DOM中的“M”代表着“Model”（模型），但说它代表着“Map”（地图）也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。
既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。
DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一棵家谱树。
家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent（父）、child（子）、sibling（兄弟）等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。
类似于人类家族谱系的情况，家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。
请看下面这份非常基本的网页，它的内容是一份购物清单。
这份文档可以用图3-1中的模型来表示。
我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些元素构成的，还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。在对Doctype做出声明后，这份文档首先打开了一个<html>标签，而这个网页里的所有其他元素都包含在这个元素里。因为所有其他的元素都包含在其内部，所以这个<html>标签既没有父辈，也没有兄弟。如果这是一棵真正的树的话，这个<html>标签显然就是树根。
图3-1  把网页中的元素表示为一棵家谱树
这正是图3-1中的家谱树以html为根元素的原因。毫无疑问，html元素完全可以代表整个文档。
如果在这份文档里更深入一层，我们将发现<head>和<body>两个分枝。它们存在于同一层次且互不包含，所以它们是兄弟关系。它们有着共同的父元素<html>，但又各有各的子元素，所以它们本身又是其他一些元素的父元素。
<head>元素有两个子元素：<meta>和<title>（这两个元素是兄弟关系）。<body>元素有三个子元素：<h1>、<p>和<ul>（这三个元素是兄弟关系）。如果继续深入下去，我们将发现<ul>也是一个父元素。它有三个子元素，它们都是<li>元素。
利用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。
例如，<h1>和<ul>之间是什么关系？答案是它们是兄弟关系。
那么<body>和<ul>之间又是什么关系？<body>是<ul>的父元素，<ul>是<body>的一个子元素。
如果把各种文档元素想像成一棵家谱树上的各个节点的话，我们就可以用同样的记号来描述DOM。不过，与使用“家谱树”网页设计html代码大全继承关系这个术语相比，把一份文档称为一棵“节点树”更准确。
3.3.1　节点
节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。网络是由节点构成的集合。
在现实世界里，一切事物都由原子构成。原子是现实世界的节点。但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。