Javascript_DOM编程艺术中文部分翻译版

JavaScriptDOM编程艺术第3章DOM本章内容●节点的概念●四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute和setAttribute终于要与DOM面对面了。能够向大家介绍DOM是笔者的荣幸，我非常乐于带领大家通过DOM的眼睛去看世界。3.1文档：DOM中的“D”DOM是“DocumentObjectModel”（文档对象模型）的首字母缩写。如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中，“对象”这个词的含义非常明确和具体。3.2对象：DOM中的“O”在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你们应该还记得，“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。JavaScript语言里的对象可以分为三种类型：●用户定义对象（user-definedobject）：由程序员自行创建的对象。本书不讨论这种对象。●内建对象（nativeobject）：内建在JavaScript语言里的对象，如Array、Math和Date等。●宿主对象（hostobject）：由浏览器提供的对象。在JavaScript语言的发展初期，程序员在编写JavaScript脚本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）——但我觉得称之为WindowObjectModel（窗口对象模型）更为贴切。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。不过，与使用“家谱树”这个术语相比，把一份文档称为一棵“节点树”更准确。3.3.1节点节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。网络是由节点构成的集合。在现实世界里，一切事物都由原子构成。原子是现实世界的节点。但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。DOM也是同样的情况。文档也是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。在DOM里存在着许多不同类型的节点。就像原子包含着亚原子微粒那样，有些DOM节点类型还包含着其他类型的节点。1.元素节点DOM的原子是元素节点（elementnode）。在描述刚才那份“购物清单”文档时，我们使用了诸如body、p和ul之类的元素。如果把Web上的文档比作一座大厦，元素就是建造这座大厦的砖块，这些元素在文档中的布局形成了文档的结构。各种标签提供了元素的名字。文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。元素可以包含其他的元素。在我们的“购物清单”文档里，所有的列表项元素都包含在一个无序清单元素的内部。事实上，没有被包含在其他元素里的唯一元素是html元素。它是我们的节点树的根元素。2．文本节点元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大多数内容都是由文本提供的。在“购物清单”例子里，p元素包含着文本“Don’tforgettobuythisstuff.”。它是一个文本节点（textnode）。在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。在“购物清单”文档里，ul元素没有直接包含任何文本节点——它包含着其他的元素节点（一些li元素），后者包含着文本节点。3．属性节点还存在着其他一些节点类型。例如，注释就是另外一种节点类型。但我们这里还想向大家再多介绍一种节点类型。元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：在DOM中，title=agentlereminder是一个属性节点（attributenode），如图3-2所示。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。并非所有的元素都包含着属性，但所有的属性都会被包含在元素里。图3-2一个元素节点，它包含着一个属性节点和一个文本节点在前面的“购物清单”示例文档里，我们可以清楚地看到那个无序清单元素（ul）有个id属性。如果曾经使用过CSS，你们对id和class之类的属性应该不会感到陌生。不过，为了照顾那些对CSS还不太熟悉的读者，我们下面将简要地重温几个最基本的CSS概念。4．CSS：层叠样式表DOM并不是人们与网页的结构打交道的唯一手段。我们还可以通过CSS（层叠样式表）告诉浏览器应该如何显示一份文档的内容。类似于JavaScript脚本，对样式的声明既可以嵌在文档的head部分（这需要用到style标签），也可以放在另外一个样式表文件里。利用CSS对某个元素的样式做出声明的语法与JavaScript函数的定义语法很相似：在样式声明里，我们可以对浏览器在显示各有关元素时使用的颜色、字体和字号做出定义，如下所示：继承（inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。例如，如果我们为body元素定义了一些颜色或字体，包含在body元素里的所有元素都将自动获得——也就是继承，那些样式：这些颜色将不仅作用于那些被直接包含在body标签里的内容，还将作用于那些嵌套在body元素内部的所有元素。这里是把刚才定义的样式应用在“购物清单”示例文档上而得到的网页显示效果。在某些场合，当把样式应用于一份文档时，我们其实只想让那些样式只作用于某个特定的元素。例如，我们只想让某一段文本变成某种特殊的颜色和字体，但不想让其他段落受到影响。为了获得如此精细的控制，我们将需要在文档里插入一些能够把这段文本与其他段落区别开来的特殊标志。为了把某一个或某几个元素与其他元素区别开来，我们需要使用class属性或id属性之一。lclass属性所有的元素都有class属性，不同的元素可以有同样的class属性值。如下所示：在样式表里，我们可以像下面这样为class属性值相同的所有元素定义一种共享的样式：我们还可以像下面这样利用class属性为一种特定类型的元素定义一种独享的样式：lid属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符，如下所示：在样式表里，我们可以像下面这样为有着特定id属性值的元素定义一种独享的样式：每个元素只能有一个id属性值，不同的元素必须有不同的id属性值。不过，我们可以在样式表里像下面这样，利用id属性为包含在某给定元素里的其他元素定义样式，而如此定义出来的样式将只作用于包含在这个给定元素里的有关元素：这里是把刚才利用id属性定义的样式应用在“购物清单”示例文档上而得到的网页显示效果。id属性就像是一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。DOM也可以使用这种挂钩，事实上，有不少DOM操作必须借助于这种挂钩才能完成。3.3.2getElementById()方法DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。请注意，JavaScript语言区分字母的大小写情况，所以大家在写出“getElementById”时千万不要把大小写弄错了。如果把它错写成“GetElementById”或“getElementbyid”，你将无法得到你真正想要的东西。这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号，这组圆括号包含着函数的参数。getElementByI