Javascript-DOM编程艺术研究

1、更多企业业学院：中小企企业管理理全能版版183套套讲座+897700份份资料总经理理、高层层管理49套讲讲座+1163888份资料中层管管理学院院46套讲讲座+660200份资料国学智智慧、易易经46套讲讲座人力资资源学院院56套讲讲座+2271223份资料各阶段段员工培培训学院院77套讲讲座+ 3244份资料员工管管理企业业学院67套讲讲座+ 87220份资料工厂生生产管理理学院52套讲讲座+ 139920份份资料财务管管理学院院53套讲讲座+ 179945份份资料销售经经理学院院56套讲讲座+ 143350份份资料销售人人员培训训学院72套讲讲座+ 48779份资料更多企业业学院：中小企企

2、业管理理全能版版183套套讲座+897700份份资料总经理理、高层层管理49套讲讲座+1163888份资料中层管管理学院院46套讲讲座+660200份资料国学智智慧、易易经46套讲讲座人力资资源学院院56套讲讲座+2271223份资料各阶段段员工培培训学院院77套讲讲座+ 3244份资料员工管管理企业业学院67套讲讲座+ 87220份资料工厂生生产管理理学院52套讲讲座+ 139920份份资料财务管管理学院院53套讲讲座+ 179945份份资料销售经经理学院院56套讲讲座+ 143350份份资料销售人人员培训训学院72套讲讲座+ 48779份资料第3章 DOMM本章内容容 节点的的概念四四个非

3、常常实用的的DOMM方法：gettEleemenntByyId、gettEleemenntsBByTaagNaame、gettAtttribbutee和seetAtttriibutte终于要与与DOMM面对面面了。能能够向大大家介绍绍DOMM是笔者者的荣幸幸，我非非常乐于于带领大大家通过过DOMM的眼睛睛去看世世界。3.1文档：DOMM中的“D”DOM是是“Doocummentt Obbjecct MModeel”（文档对对象模型型）的首首字母缩缩写。如如果没有有doccumeent（文档），DOOM也就就无从谈谈起。当当创建了了一个网网页并把把它加载载到Weeb浏览览器中时时，DOOM就在在

4、幕后悄悄然而生生。它将将根据你你编写的的网页文文档创建建一个文文档对象象。在人类语语言中，“对象象”这个个词的含含义往往往不那么么明确和和具体，它几乎乎可以用用来称呼呼任何一一种客观观存在的的事物。但在程程序设计计语言中中，“对对象”这这个词的的含义非非常明确确和具体体。3.2对象：DOMM中的“O”在上一章章的末尾尾，我们们向大家家展示了了几个JJavaaScrriptt对象的的例子。你们应应该还记记得，“对象”是一种种独立的的数据集集合。与与某个特特定对象象相关联联的变量量被称为为这个对对象的属属性；可可以通过过某个特特定对象象去调用用的函数数被称为为这个对对象的方方法。JavaaScrr

5、iptt语言里里的对象象可以分分为三种种类型：真的不掉掉线吗？、？用用户定义义对象（useer-ddefiinedd obbjecct）：由程序序员自行行创建的的对象。本书不不讨论这这种对象象。内内建对象象（naativve oobjeect）：内建建在JaavaSScriipt语语言里的的对象，如Arrrayy、Maath和和Datte等。宿宿主对象象（hoost objjectt）：由由浏览器器提供的的对象。在JavvaSccrippt语言言的发展展初期，程序员员在编写写JavvaSccrippt脚本本时经常常需要用用到一些些非常重重要的宿宿主对象象，它们们当中最最基础的的是wiindoo

6、w对象象。winddow对对象对应应着浏览览器窗口口本身，这个对对象的属属性和方方法通常常被统称称为BOOM（浏浏览器对对象模型型）但我觉觉得称之之为Wiindoow OObjeect Moddel（窗口对对象模型型）更为为贴切。BOMM向程序序员提供供了wiindoow.oopenn和wiindoow.bblurr等方法法，你们们在上网网冲浪时时看到的的各种弹弹出窗口口和下拉拉菜单其数数量之多多已经到到了泛滥滥成灾的的地步几乎乎都是由由这些方方法负责责创建和和处理的的。难怪怪JavvaSccrippt会有有一个不不好的名名声！值得庆幸幸的是，在这本本书里我我们不需需要与BBOM打打太多的的交

7、道。我们将将把注意意力集中中在浏览览器窗口口的内部部而不是是浏览器器窗口本本身。我我们将着着重探讨讨如何对对网页的的内容进进行处理理，而用用来实现现这一目目标的载载体就是是doccumeent对对象。在本书的的后续内内容里，我们将将尽可能能地只讨讨论doocummentt对象的的属性和和方法。现在，我我们已经经对DOOM中的的字母“D”（doccumeent，文档）和字母母“O”（obbjecct，对对象）做做了解释释，那么么字母“M”又又代表着着什么呢呢？3.3模型：DOMM中的“M”DOM中中的“MM”代表表着“MModeel”（模型），但说说它代表表着“MMap”（地图图）也未未尝不可可

8、。模型型也好，地图也也罢，它它们的含含义都是是某种事事物的表表现形式式。就像像一个模模型火车车代表着着一列真真正的火火车、一一张城市市街道图图代表着着一个实实际存在在的城市市那样，DOMM代表着着被加载载到浏览览器窗口口里的当当前网页页：浏览览器向我我们提供供了当前前网页的的地图（或者说说模型），而我我们可以以通过JJavaaScrriptt去读取取这张地地图。真的不掉掉线吗？、？既然是地地图，就就必须有有诸如方方向、等等高线和和比例尺尺之类的的记号。要想看看懂和使使用地图图，就必必须知道道这些记记号的含含义和用用途这个道道理同样样适用于于DOMM。要想想从DOOM获得得信息，我们必必须先把把

9、各种用用来表示示和描述述一份文文档的记记号弄明明白。DOM把把一份文文档表示示为一棵棵树（这这里所说说的“树树”是数数学意义义上的概概念），这是我我们理解解和运用用这一模模型的关关键。更更具体地地说，DDOM把把文档表表示为一一棵家谱谱树。家谱树本本身又是是一种模模型。家家谱树的的典型用用法是表表示一个个人类家家族的谱谱系并使使用paarennt（父父）、cchilld（子子）、ssibllingg（兄弟弟）等记记号来表表明家族族成员之之间的关关系。家家谱树可可以把一一些相当当复杂的的关系简简明地表表示出来来：一位位特定的的家族成成员既是是某些成成员的父父辈，又又是另一一位成员员的子辈辈，同时

10、时还是另另一位成成员的兄兄弟。类似于人人类家族族谱系的的情况，家谱树树模型也也非常适适合用来来表示一一份用(X)HHTMLL语言编编写出来来的文档档。请看下面面这份非非常基本本的网页页，它的的内容是是一份购购物清单单。这份文档档可以用用图3-1中的的模型来来表示。我们来分分析一下下这个网网页的结结构。这这种分析析不仅可可以让我我们了解解它是由由哪些元元素构成成的，还还可以让让我们了了解为什什么图33-1中中的模型型可以如如此完美美地把它它表示出出来。在在对Dooctyype做做出声明明后，这这份文档档首先打打开了一一个标签签，而这这个网页页里的所所有其他他元素都都包含在在这个元元素里。因为所所

11、有其他他的元素素都包含含在其内内部，所所以这个个标签既既没有父父辈，也也没有兄兄弟。如如果这是是一棵真真正的树树的话，这个真真的不掉掉线吗？、？标标签显然然就是树树根。图3-11 把把网页中中的元素素表示为为一棵家家谱树这正是图图3-11中的家家谱树以以htmml为根根元素的的原因。毫无疑疑问，hhtmll元素完完全可以以代表整整个文档档。如果在这这份文档档里更深深入一层层，我们们将发现现和两个个分枝。它们存存在于同同一层次次且互不不包含，所以它它们是兄兄弟关系系。它们们有着共共同的父父元素，但又各各有各的的子元素素，所以以它们本本身又是是其他一一些元素素的父元元素。元元素有两两个子元元素：和

12、和（这这两个元元素是兄兄弟关系系）。元元素有三三个子元元素：、和（这三三个元素素是兄弟弟关系）。如果果继续深深入下去去，我们们将发现现也是是一个父父元素。它有三三个子元元素，它它们都是是元素素。利用这种种简单的的家谱关关系记号号，我们们可以把把各元素素之间的的关系简简明清晰晰地表达达出来。例如，和之之间是什什么关系系？答案案是它们们是兄弟弟关系。那么和之间又又是什么么关系？是的的父元素素，是是的一个个子元素素。如果把各各种文档档元素想想像成一一棵家谱谱树上的的各个节节点的话话，我们们就可以以用同样样的记号号来描述述DOMM。不过过，与使使用“家家谱树”这个术术语相比比，把一一份文档档称为一一棵

13、“节节点树”更准确确。3.3.1节节点节点（nnodee）这个个名词来来自网络络理论，它代表表着网络络中的一一个连接接点。网网络是由由节点构构成的集集合。在现实世世界里，一切事事物都由由原子构构成。原原子是现现实世界界的节点点。但原原子本身身还可以以进一步步分解为为更细小小的亚原原子微粒粒。这些些亚原子子微粒同同样是节节点。DOM也也是同样样的情况况。文档档也是由由节点构构成的集集合，只只不过此此时的节节点是文文档树上上的树枝枝和树叶叶而已。真的不掉掉线吗？、？在DOMM里存在在着许多多不同类类型的节节点。就就像原子子包含着着亚原子子微粒那那样，有有些DOOM节点点类型还还包含着着其他类类型的

14、节节点。1. 元元素节点点DOM的的原子是是元素节节点（eelemmentt noode）。在描述刚刚才那份份“购物物清单”文档时时，我们们使用了了诸如、和之之类的元元素。如如果把WWeb上上的文档档比作一一座大厦厦，元素素就是建建造这座座大厦的的砖块，这些元元素在文文档中的的布局形形成了文文档的结结构。各种标签签提供了了元素的的名字。文本段段落元素素的名字字是“pp”，无无序清单单元素的的名字是是“ull”，列列表项元元素的名名字是“li”。元素可以以包含其其他的元元素。在在我们的的“购物物清单”文档里里，所有有的列表表项元素素都包含含在一个个无序清清单元素素的内部部。事实实上，没没有被包包

15、含在其其他元素素里的唯唯一元素素是元素素。它是是我们的的节点树树的根元元素。2文本本节点元素只是是不同节节点类型型中的一一种。如如果一份份文档完完全由一一些空白白元素构构成，它它将有一一个结构构，但这这份文档档本身将将不会包包含什么么内容。在网上上，内容容决定着着一切，没有内内容的文文档是没没有任何何价值的的，而绝绝大多数数内容都都是由文文本提供供的。在“购物物清单”例子里里，元素素包含着着文本“Donnt forrgett too buuy tthiss sttufff.”。它是一一个文本本节点（texxt nnodee）。在XHTTML文文档里，文本节节点总是是被包含含在元素素节点的的内部

16、。但并非非所有的的元素节节点都包包含有文文本节点点。在“购物清清单”文文档里，元素素没有直直接包含含任何文文本节点点它它包含着着其他的的元素节节点（一一些元元素），后者包包含着文文本节点点。3属性性节点还存在着着其他一一些节点点类型。例如，注释就就是另外外一种节节点类型型。但我我们这里里还想向向大家再再多介绍绍一种节节点类型型。真的不掉掉线吗？、？元素都或或多或少少地有一一些属性性，属性性的作用用是对元元素做出出更具体体的描述述。例如如，几乎乎所有的的元素都都有一个个tittle属属性，而而我们可可以利用用这个属属性对包包含在元元素里的的东西做做出准确确的描述述：在DOMM中，ttitlle=

17、a ggenttle remmindder是一个个属性节节点（aattrribuute nodde），如图33-2所所示。因因为属性性总是被被放在起起始标签签里，所所以属性性节点总总是被包包含在元元素节点点当中。并非所有有的元素素都包含含着属性性，但所所有的属属性都会会被包含含在元素素里。图3-22 一一个元素素节点，它包含含着一个个属性节节点和一一个文本本节点在前面的的“购物物清单”示例文文档里，我们可可以清楚楚地看到到那个无无序清单单元素（）有有个idd属性。如果曾曾经使用用过CSSS，你你们对iid和cclasss之类类的属性性应该不不会感到到陌生。不过，为了照照顾那些些对CSSS还不不

18、太熟悉悉的读者者，我们们下面将将简要地地重温几几个最基基本的CCSS概概念。4CSSS：层层叠样式式表DOM并并不是人人们与网网页的结结构打交交道的唯唯一手段段。我们们还可以以通过CCSS（层叠样样式表）告诉浏浏览器应应该如何何显示一一份文档档的内容容。类似于JJavaaScrriptt脚本，对样式式的声明明既可以以嵌在文文档的部部分（这这需要用用到标标签），也可以以放在另另外一个个样式表表文件里里。利用用CSSS对某个个元素的的样式做做出声明明的语法法与JaavaSScriipt函函数的定定义语法法很相似似：在样真的的不掉线线吗？、？式声明里里，我们们可以对对浏览器器在显示示各有关关元素时时

19、使用的的颜色、字体和和字号做做出定义义，如下下所示：继承（iinheerittancce）是是CSSS技术中中的一项项强大功功能。类类似于DDOM，CSSS也把文文档的内内容视为为一棵节节点树。节点树树上的各各个元素素将继承承其父元元素的样样式属性性。例如，如如果我们们为boody元元素定义义了一些些颜色或或字体，包含在在boddy元素素里的所所有元素素都将自自动获得得也也就是继继承，那那些样式式：这些颜色色将不仅仅作用于于那些被被直接包包含在标标签里的的内容，还将作作用于那那些嵌套套在boody元元素内部部的所有有元素。这里是把把刚才定定义的样样式应用用在“购购物清单单”示例例文档上上而得到

20、到的网页页显示效效果。在某些场场合，当当把样式式应用于于一份文文档时，我们其其实只想想让那些些样式只只作用于于某个特特定的元元素。例例如，我我们只想想让某一一段文本本变成某某种特殊殊的颜色色和字体体，但不不想让其其他段落落受到影影响。为为了获得得如此精精细的控控制，我我们将需需要在文文档里插插入一些些能够把把这段文文本与其其他段落落区别开开来的特特殊标志志。为了把某某一个或或某几个个元素与与其他元元素区别别开来，我们需需要使用用claass属属性或iid属性性之一。l claass属属性所有的元元素都有有claass属属性，不不同的元元素可以以有同样样的cllasss属性值值。如下下所示：真的

21、不掉掉线吗？、？在样式表表里，我我们可以以像下面面这样为为claass属属性值相相同的所所有元素素定义一一种共享享的样式式：我们还可可以像下下面这样样利用cclasss属性性为一种种特定类类型的元元素定义义一种独独享的样样式：l id属属性id属性性的用途途是给网网页里的的某个元元素加上上一个独独一无二二的标识识符，如如下所示示：在样式表表里，我我们可以以像下面面这样为为有着特特定idd属性值值的元素素定义一一种独享享的样式式：每个元素素只能有有一个iid属性性值，不不同的元元素必须须有不同同的idd属性值值。不过过，我们们可以在在样式表表里像下下面这样样，利用用id属属性为包包含在某某给定元

22、元素里的的其他元元素定义义样式，而如此此定义出出来的样样式将只只作用于于包含在在这个给给定元素素里的有有关元素素：这里是把把刚才利利用idd属性定定义的样样式应用用在“购购物清单单”示例例文档上上而得到到的网页页显示效效果。id属性性就像是是一个挂挂钩，它它一头连连着文档档里的某某个元素素，另一一头连着着CSSS样式表表真的不不掉线吗吗？、？里的某个个样式。DOMM也可以以使用这这种挂钩钩，事实实上，有有不少DDOM操操作必须须借助于于这种挂挂钩才能能完成。3.3.2ggetEElemmenttByIId()方法DOM提提供了一一个名为为gettEleemenntByyId()的方方法，这这个

23、方法法将返回回一个与与那个有有着给定定id属属性值的的元素节节点相对对应的对对象。请请注意，JavvaSccrippt语言言区分字字母的大大小写情情况，所所以大家家在写出出“geetEllemeentBByIdd”时千千万不要要把大小小写弄错错了。如如果把它它错写成成“GeetEllemeentBByIdd”或“gettEleemenntbyyid”，你将将无法得得到你真真正想要要的东西西。这个方法法是与ddocuumennt对象象相关联联的函数数。在脚脚本代码码里，函函数名的的后面必必须跟有有一组圆圆括号，这组圆圆括号包包含着函函数的参参数。ggetEElemmenttByIId()方法只只

24、有一个个参数：你想获获得的那那个元素素的idd属性值值，这个个id值值必须放放在单引引号或双双引号里里。下面是一一个例子子：这个调用用将返回回一个对对象，这这个对象象对应着着doccumeent对对象里的的一个独独一无二二的元素素，那个个元素的的HTMML iid属性性值是ppurcchasses。再说一一遍，ggetEElemmenttByIId()方法将将返回一一个对象象。你们们可以用用typpeoff操作符符来验证证这一点点。tyypeoof操作作符可以以告诉我我们它的的操作数数是不是是一个字字符串、数值、函数、布尔值值或对象象。下面是把把一些JJavaaScrriptt语句插插入到前前

25、面给出出的“购购物清单单”文档档之后得得到的一一份代码码清单，新增的的代码（黑体字字部分）出现在在结束束标签之之前。顺顺便说一一句，我我本人并并不赞成成把JaavaSScriipt代代码直接接嵌入一一份文档档的做法法，但它它不失为为一种简简便快捷捷的测试试手段：把上面这这些代码码保存为为一个XXHTMML文件件。当在在你们的的Webb浏览器器里加载载这个XXHTMML文件件时，屏屏幕上将将弹出一一个如下下所示真真的不掉掉线吗？、？的altter对对话框，它向你你们报告告doccumeent.gettEleemenntByyId (ppurcchasses)的类类型它是一一个对象象。不仅仅如此，

26、如果用用上述办办法去检检查其他他元素节节点的类类型，你你们也会会看到类类似的aalerrt对话话框。事实上，文档中中的每一一个元素素都对应应着一个个对象。利用DDOM提提供的方方法，我我们可以以把与这这些元素素相对应应的任何何一个对对象筛选选出来。一般来说说，我们们用不着着为文档档里的每每一个元元素都分分别定义义一个独独一无二二的idd值；那那也太小小题大做做了。要要知道，即使某某个元素素没有独独一无二二的idd值，我我们也可可以利用用DOMM提供的的另一个个方法把把与之对对应的对对象准确确无误地地筛选出出来。3.3.3ggetEElemmenttsByyTaggNamme()方法getEEl

27、emmenttsByyTaggNamme()方法将将返回一一个对象象数组，每个对对象分别别对应着着文档里里有着给给定标签签的一个个元素。类似于于gettEleemenntByyId()，这这个方法法也是只只有一个个参数的的函数，它的参参数是(X)HHTMLL标签的的名字：它与geetEllemeentBByIdd()方方法有许许多相似似之处，但有一一点要特特别提醒醒大家注注意：ggetEElemmentts- ByTTagNNamee()方方法返回回的是一一个数组组；你们们在编写写脚本时时千万注注意不要要把这两两个方法法弄混了了。下面是一一个例子子：这个调用用将返回回一个对对象数组组，每个个对

28、象分分别对应应着doocummentt对象中中的一个个列表项项（lii）元素素。与任任何其他他的数组组一样，我们可可以利用用lenngthh属性查查出这个个数组里里的元素素个数。真的不掉掉线吗？、？首先，在在上一小小节给出出的XHHTMLL示例文文档里把把标标签中的的altter语语句替换换为下面面这条语语句：然后，用用浏览器器里重新新加载那那个XHHTMLL文件，你们就就会看到到这份示示例文档档里的列列表项元元素的个个数：33。这个个数组里里的每个个元素都都是一个个对象。可以通通过利用用一个循循环语句句和tyypeoof操作作符去遍遍历这个个数组的的办法来来验证这这一点。例如，你们可可以试试

29、试下面这这个foor循环环：请注意，即使在在整个文文档里只只有一个个元素有有着给定定的标签签名，ggetEElemmenttsByyTaggNamme()方法也也将返回回一个数数组。此此时，那那个数组组的长度度是1。你们或许许早就觉觉得用键键盘反复复敲入ddocuumennt.ggetEElemmenttsByyTaggNamme(li)是件件很麻烦烦的事情情，而这这些长长长的字符符串会让让代码变变得越来来越难以以阅读。有个简简单的办办法可以以减少不不必要的的打字量量并改善善代码的的可读性性：只要要把doocummentt.geetEllemeentssByTTagNNamee(lli)赋值给

30、给一个变变量即可可。请在上一一小节给给出的XXHTMML示例例文档里里把标签中中的allterr语句替替换为下下面这些些语句：现在，当当用浏览览器里重重新加载载那个XXHTMML文件件时，你你们将看看到三个个aleert对对话框，显示在在这三个个aleert对对话框里里的消息息都是“objjectt”。 getEElemmenttsByyTaggNamme()方法允允许我们们把一个个通配符符当为它它的参数数，而这这意味着着文档里里的每个个元素都都将在这这个函数数所返回回的数组组里占有有一席之之地。通通配符（星号字字符“*”）必必须放在在引号里里，这是是为了让让通配符符与乘法法操作符符有所区区别

31、。如如果真的的不掉线线吗？、？你想知道道某份文文档里总总共有多多少个元元素节点点，像下下面这样样以通配配符为参参数去调调用geetEllemeentssByTTagNNamee()方方法是最最简便的的办法：我们还可可以把ggetEElemmenttByIId()和geetEllemeentssByTTagNNamee()方方法结合合起来运运用。例例如，我我们刚才才给出的的几个例例子都是是通过ddocuumennt对象象调用ggetEElemmenttsByyTaggNamme()方法的的，如果果只想知知道其iid属性性值是ppurcchasse的元元素包含含着多少少个列表表项（lli）的的话，

32、你你就必须须通过一一个更具具体的对对象去调调用这个个方法，如下所所示：在这两条条语句执执行完毕毕后，iitemms数组组将只包包含其iid属性性值是ppurcchasse的无无序清单单里的元元素。具具体到我我们这个个例子，iteems数数组的长长度刚好好与这份份文档里里的列表表项元素素的总数数相等：如果还需需要更多多的证据据，下面面这些语语句将证证明ittemss数组里里的每个个值确实实是一个个对象：3.4趁热打打铁在看过那那么多显显示着单单词“oobjeect”的allertt对话框框后，你你们很可可能不愿愿意再看看到它。如果真真是如此此，我的的目的也也就达到到了我想通通过这些些aleert

33、对对话框强强调这样样一个事事实：文文档中的的每个元元素节点点都是一一个对象象。我现现在要告告诉大家家的是，这些对对象中的的每个都都为我们们准备了了一系列列非常有有用的方方法，而而这一切切当然都都要归功功于DOOM。利利用这些些已经预预先定义义好的方方法，我我们不仅仅可以检检索出关关于文档档里的任任何一个个对象的的信息，甚至还还可以改改变某些些元素的的属性。下面是对对本章此此前学习习内容的的一个简简要总结结：真的不掉掉线吗？、？一一份文档档就是一一棵节点点树。节节点分为为不同的的类型：元素节节点、属属性节点点和文本本节点等等。ggetEElemmenttByIId()方法将将返回一一个对象象，该

34、对对象对应应着文档档里的一一个特定定的元素素节点。ggetEElemmenttsByyTaggNamme()方法将将返回一一个对象象数组，它们分分别对应应着文档档里的一一个特定定的元素素节点。这这些节点点中的每每个都是是一个对对象。接下来，我们将将向大家家介绍几几个与这这些对象象相关联联的属性性和方法法。3.4.1ggetAAttrribuute()方法法至此，我我们已经经向大家家介绍了了两种检检索特定定元素节节点的办办法：一一种是使使用geetEllemeentBByIdd()方方法，另另一种是是使用ggetEElemmenttsByyTaggNamme()方法。在找到到那个元元素后，我们就

35、就可以利利用geetAtttriibutte()方法把把它的各各种属性性的值查查询出来来。getAAttrribuute()方法法是一个个函数。它只有有一个参参数你打算算查询的的属性的的名字：不过，ggetAAttrribuute()方法法不能通通过doocummentt对象调调用，这这与我们们此前介介绍过的的其他方方法不同同。我们们只能通通过一个个元素节节点对象象调用它它。例如，你你可以把把它与ggetEElemmenttsByyTaggNamme()方法结结合起来来，去查查询每个个元素的的tittle属属性，如如下所示示：如果把上上面这段段代码插插入到前前面给出出的“购购物清单单”示例例文

36、档的的末尾，并在WWeb浏浏览器里里重新加加载这个个页面，屏幕上上将弹出出一个显显示着文文本消息息“a genntlee reeminnderr”的aalteer对话话框。在“购物物清单”文档里里只有一一个带有有tittle属属性的元元素。假假如这份份文档还还有一个个或更多多个不带带tittle属属性的元元素，则则相应的的gettAtttribbutee(ttitlle)调用将将返回nnulll。nuull是是JavvaSccrippt语言言中的空空值，其其含义是是“你说说的这个个东真的的不掉线线吗？、？西不存在在”。如如果你们们想亲自自验证一一下这件件事，请请先把下下面这段段文本插插入到“购

37、物清清单”文文档中的的现有文文本段落落之后：然后重新新加载这这个页面面。这一一次，你你们将看看到两个个altter对对话框，而第二二个对话话框将是是一片空空白或者者是只显显示着单单词“nnulll”具体情情况要取取决于你你的Weeb浏览览器将如如何显示示nulll值。可以修改改我们的的脚本，让它只只在tiitlee属性存存在时才才弹出一一条消息息。我们们将增加加一条iif语句句来检查查gettAtttribbutee()方方法的返返回值是是不是nnulll。趁着着这个机机会，我我们还增增加了几几个变量量以提高高脚本的的可读性性：现在，如如果重新新加载这这个页面面，你们们将只会会看到一一个显示示

38、着“aa geentlle rremiindeer”消消息的aalteer对话话框，如如下所示示。我们甚至至可以把把这段代代码缩得得更短一一些。当当检查某某项数据据是否是是nulll值时时，我们们其实是是在检查查它是否否存在。这种检检查可以以简化为为直接把把被检查查的数据据用做iif语句句的条件件。iff (ssomeethiing)与iff (ssomeethiing != nulll)完完全等价价，但前前者显然然更为简简明。此此时，如如果soometthinng存在在，则iif语句句的条件件将为真真；如果果sommethhingg不存在在，则iif语句句的条件件将为假假。具体到这这个例子子

39、，只要要我们把把if (tiitlee_teext != nulll)替替换为iif (tittle_texxt)，我们就就可以得得到更简简明的代代码。此此外，为为了进一一步增加加代码的的可读性性，我们们还可以以趁此机机会把aalteer语句句与iff语句写写在同一一行上，这可以以让它们们更接近近于我们们日常生生活中的的英语句句子：3.4.2ssetAAttrribuute()方法法我们此前前介绍给给大家的的所有方方法都只只能用来来检索信信息。ssetAAttrribuute()方法法真的不不掉线吗吗？、？与它们有有一个本本质上的的区别：它允许许我们对对属性节节点的值值做出修修改。类似于gge

40、tAAttrribuute()方法法，seetAtttriibutte()方法也也是一个个只能通通过元素素节点对对象调用用的函数数，但ssetAAttrribuute()方法法需要我我们向它它传递两两个参数数：在下面的的例子里里，第一一条语句句将把iid属性性值是ppurcchasse的元元素检索索出来，第二条条语句将将把这个个元素的的tittle属属性值设设置为aa liist of gooods：我们可以以利用ggetAAttrribuute()方法法来证明明这个元元素的ttitlle属性性值确实实发生了了变化：上面这些些语句将将在屏幕幕上弹出出两个aalerrt对话话框：第第一个aalt

41、eer对话话框出现现在seetAtttriibutte()方法被被调用之之前，它它将是一一片空白白或显示示着单词词“nuull”；第二二个出现现在tiitlee属性值值被设置置之后，它将显显示着“a llistt off gooodss”消息息。在上例中中，我们们设置了了一个现现有节点点的tiitlee属性，但这个个属性原原先并不不存在。这意味味着我们们发出的的settAtttribbutee()调调用实际际完成了了两项操操作：先先把这个个属性创创建出来来，然后后再对其其值进行行设置。如果我我们把ssetAAttrribuute()方法法用在元元素节点点的某个个现有属属性上，这个属属性的当当前

42、值将将被覆盖盖。在“购物物清单”示例文文档里，元素已已经有了了一个ttitlle属性性，这个个属性的的值是aa geentlle rremiindeer。我我们可以以用seetAtttriibutte()方法来来改变它它的当前前值：上面这段段代码将将先从文文档里把把已经带带有tiitlee属性的的元素全全部检索索出来，然后把把它们的的tittle属属性值全全部修改改为brrandd neew ttitlle ttextt。具体体到“购购物真的的不掉线线吗？、？清单”文文档，属属性值aa geentlle rremiindeer将被被覆盖。这里有一一个非常常值得关关注的细细节：通通过seetAt

43、ttriibutte()方法对对文档做做出的修修改，将将使得文文档在浏浏览器窗窗口里的的显示效效果和/或行为为动作发发生相应应的变化化，但我我们在通通过浏览览器的vvieww soourcce（查查看源代代码）选选项去查查看文档档的源代代码时看看到的仍仍将是原原来的属属性值也就就是说，settAtttribbutee()方方法做出出的修改改不会反反映在文文档本身身的源代代码里。这种“表里不不一”的的现象源源自DOOM的工工作模式式：先加加载文档档的静态态内容、再以动动态方式式对它们们进行刷刷新，动动态刷新新不影响响文档的的静态内内容。这这正是DDOM的的真正威威力和诱诱人之处处：对页页面内容容

44、的刷新新不需要要最终用用户在他他们的浏浏览器里里执行页页面刷新新操作就就可以实实现。3.5小结在这一章章里，我我们向大大家介绍绍了DOOM提供供的四个个方法：ggetEElemmenttByIId()方法ggetEElemmenttsByyTaggNamme()方法ggetAAttrribuute()方法法ssetAAttrribuute()方法法这四个方方法是将将要编写写的许多多DOMM脚本的的基石。DOM还还提供了了许多其其他的属属性和方方法，如如noddeNaame、noddeVaaluee、chhileeNoddes、nexxtSiibliing和和parrenttNodde等，但现在

45、在还不是是它们出出场的时时候我打算算在本书书后面的的有关章章节中选选择一些些适当的的时机把把它们依依次介绍绍给大家家。我在在这里列列出它们们的目的的只是为为了激起起大家的的学习兴兴趣。本章内容容比较偏偏重于理理论。在在看过那那么多的的altter对对话框之之后，相相信大家家都迫不不及待地地想通过过其他一一些东西西去进一一步了解解和测试试DOMM，而我我也正想想通过一一个案例例来进一一步展示示DOMM的强大大威力。真的不掉掉线吗？、？在下一章章中，我我将带领领大家利利用本章章介绍的的四个DDOM方方法去创创建一个个基于JJavaaScrriptt的图片片库。第4章 案例研研究：JJavaaScr

46、riptt美术馆馆现在，是是时候利利用DOOM去完完成一些些简单的的任务了了。在这这一章中中，我将将带领大大家用JJavaaScrriptt和DOOM去建建立一个个图片库库，并将将其称为为“JaavaSScriipt美美术馆”。我们们将按照照以下步步骤来完完成这一一案例：编编写一份份优秀的的标记语语言文档档。编编写一个个JavvaSccrippt函数数以显示示用户想想要查看看的图片片。在在标记语语言文档档里触发发一个调调用JaavaSScriipt图图片显示示的函数数。对对这个JJavaaScrriptt函数的的功能进进行扩展展。这需需要用到到几个新新的DOOM方法法。把一些图图片发布布到网上

47、上的办法法很多。最容易易想到的的办法是是把所有有的图片片都放到到同一个个网页里里。不过过，如果果你打算算发布的的图片比比较多的的话，这这个页面面很快就就会因为为变得过过于巨大大而失去去吸引力力。要知知道，虽虽然这种种网页本本身的HHTMLL代码不不会多到到哪儿去去，但算算上那些些图片可可就不一一样了。我们必必须面对对的现实实是：数数据量越越大，网网页的下下载时间间就越长长，但愿愿意等待待很长时时间去下下载一个个网页的的人却没没有几个个。因此，为为每张图图片分别别创建一一个网页页的解决决方案显显然更值值得考虑虑。你的的图片库库将不再再是一个个体积庞庞大、难难以下载载的网页页，而是是许多尺尺寸合理

48、理、便于于下载和和浏览的的页面。不过，这一解解决方案案并非尽尽善尽美美：首先先，为每每张图片片分别制制作一个个网页需需要花费费不少的的时间和和精力；其次，需要在在每个网网页上提提供一些些链接，来给出出当前图图片在整整个图片片库里的的位置以以方便人人们从当当前图片片转到其其他的图图片。如果你想想两全其其美，利利用JaavaSScriipt来来创建图图片库将将是最佳佳的选择择：把整整个图片片库的浏浏览链接接集中安安排在你你的图片片库主页页里，只只在用户户点击了了这个主主页里的的某个图图片链接接时才把把相应的的图片传传送给他他。4.1编写标标记语言言文档为了完成成“JaavaSScriipt美美术馆

49、”案例，我特意意用数码码相机拍拍摄了几几张照片片，真的的不掉线线吗？、？并把它们们修整成成最适合合于用浏浏览器来来查看的的尺寸，即4000像素素宽3300像像素高。第一项工工作是为为这些图图片创建建一个链链接清单单。因为为我没打打算让这这些图片片按照某某种特殊殊的顺序序排列，所以将将使用一一个无序序清单元元素（）来列列出那些些链接。如果想想让自己己的图片片按顺序序排列的的话，应应该使用用一个排排序清单单元素（）去去组织图图片链接接。下面就是是我编写写出来的的HTMML文档档：我将把这这份文档档保存为为galllerry.hhtmll文件，并把图图片集中中保存在在子目录录imaagess里。我我

50、的immagees子目目录和ggallleryy.httml文文件位于于同一个个子目录录下。在在galllerry.hhtmll文件里里，无序序清单元元素中的的每个链链接分别别指向不不同的图图片。在在浏览器器窗口里里点击某某个链接接就可以以转到相相应的图图片，但但从图片片重新返返回到链链接清单单目前还还必须借借助于浏浏览器的的Bacck（后后退）按按钮。下下面是这这个基本本的链接接清单在在浏览器器窗口里里的显示示效果。这是一个个相当令令人满意意的网页页，但它它的默认认行为还还不太理理想。下下面是我我觉得还还需要改改进的几几个地方方：当当点击某某个链接接时，我我希望能能留在这这个网页页而不是是转

51、到另另一个窗窗口。当当点击某某个链接接时，我我希望能能在这个个网页上上同时看看到那张张图片以以及原有有的图片片清单。下面是我我为了实实现上述述希望而而需要完完成的几几项改进进： 通通真的不不掉线吗吗？、？过增加一一个“占占位符”图片的的办法在在这个主主页上为为图片预预留一个个浏览区区域。在在点击某某个链接接时，将将拦截这这个网页页的默认认行为。在在点击某某个链接接时，将将把“占占位符”图片替替换为与与那个链链接相对对应的图图片。我们先来来解决“占位符符”图片片的问题题。我选选用了一一个类似似于名片片的图片片，你们们可以根根据个人人喜好来来决定选选用的图图片，即即使选用用一个空空白图片片也没问问

52、题。把下面这这些代码码插入到到图片名名单的末末尾：我对这个个图片的的id属属性进行行了设置置，这将将使我可可以通过过一个外外部的样样式表对对图片的的显示位位置和显显示效果果加以控控制。例例如，我我可以让让这个图图片出现现在链接接清单的的旁边而而不是它它的下方方。我还还可以在在自己的的JavvaSccrippt代码码里使用用这个iid值。下面是是这个页页面在增增加了“占位符符”图片片后的显显示效果果。现在，我我的HTTML文文档已经经准备好好了。接接下来的的工作是是编写一一些必要要的JaavaSScriipt代代码。4.2编写JJavaaScrriptt函数为了把“占位符符”图片片替换为为想要查

53、查看的图图片，需需要改变变它的ssrc属属性。ssetAAttrribuute()方法法是完成成这项工工作的最最佳选择择，而我我将利用用这个方方法写一一个函数数。那个个函数只只有一个个参数，即我想想查看的的那张图图片的链链接；它它将通过过改变“占位符符”图片片的srrc属性性的办法法将其替替换为我我想查看看的那张张图片。首先，需需要给函函数起一一个好的的名字。我想让让它既能能提醒我我这个函函数的用用途，又又足够简简明扼要要。我决决定把这这个函数数命名为为shoowPiic()。还需需要给这这个函数数的参数数起一个个名字，我决定定把它命命名为wwhicchpiic：whicchpiic代表表着一

54、个个元素节节点；具具体地说说，那将将是一个个指向某某个图片片的元素素。我需需要知道道那个图图片的文文件路径径，这个个路径可可以通过过在whhichhpicc元素上上调用gge真的的不掉线线吗？、？tAtttribbutee()方方法的办办法查出出来只要把把hrref作为参参数传递递给geetAtttriibutte()方法，就可以以知道那那个图片片的文件件路径了了：我将把这这个路径径存入一一个变量量以便在在后面的的语句里里使用它它。我决决定把这这个变量量命名为为souurcee：接下来，还需要要把“占占位符”图片检检索出来来，这种种事对ggetEElemmenttByIId()方法来来说不过过

55、是小菜菜一碟： 我不想重重复敲入入“doocummentt. ggetEElemmenttByIId(plaacerrhollderr)”这么长长的字符符串，所所以将把把这个元元素赋值值给一个个变量并并将其命命名为pplaccerhholdder：现在，已已经声明明并赋值值了两个个变量：souurcee和pllaceerhooldeer。它它们可以以让我的的脚本简简明易读读。我将使用用settAtttribbutee()方方法对pplaccerhholdder元元素的ssrc属属性进行行刷新。还记得得吗，这这个方法法有两个个参数：一个是是打算对对之进行行设置的的属性，另一个个是这个个属性的的新

56、属性性值。具具体到这这个例子子，因为为我想对对srcc属性进进行设置置，所以以第一个个参数是是srrc；至于第第二个参参数，也也就是ssrc属属性的新新属性值值，我已已经把它它保存在在souurcee变量里里了：这显然要要比下面面这么冗冗长的代代码更容容易阅读读和理解解：4.2.1DDOM之之前的解解决方案案真的不掉掉线吗？、？其实，不不使用ssetAAttrribuute()方法法也可以以改变某某个图片片的srrc属性性。setAAttrribuute()方法法是“第第1级DDOM”（DOOM LLeveel 11）的组组成部分分之一，这个方方法可以以对任意意元素节节点的任任意属性性进行设设

57、置。在在“第11级DOOM”出出现之前前，程序序员只能能通过另另外一种种办法对对一部分分元素的的属性进进行设置置，这个个办法至至少在目目前还可可以用来来改变某某些属性性的值。例如，如如果想改改变某个个输入元元素的vvaluue属性性，可以以使用如如下所示示的办法法：这与下面面这条语语句的效效果是等等价的：类似的办办法也可可以用来来改变图图片的ssrc属属性。例例如，在在我的图图片库脚脚本里，完全可可以用下下面这条条语句来来代替ssetAAttrribuute()调用用：我个人更更喜欢使使用seetAtttriibutte()方法。这起码码可以让让我不必必费心去去记忆哪哪些元素素的哪些些属性可可

58、以用哪哪些DOOM之前前的方法法去设置置。虽然然用那些些老办法法可以毫毫无问题题地对文文档里的的图片、表单和和其他一一些元素素的属性性进行设设置，但但settAtttribbutee()方方法的优优势在于于它可以以对文档档中的任任何一个个元素的的任何一一个属性性做出修修改。“第1级级DOMM”的另另一个优优势是可可移植性性更好。那些老老方法只只适用于于Webb文档，DOMM则适用用于任何何一种标标记语言言。虽然然这种差差异对我我们这个个例子没没有影响响，但我我希望大大家能够够牢牢记记住这一一点：DDOM是是一种适适用于多多种环境境和多种种程序设设计语言言的通用用型APPI。如如果想把把从本书书

59、学到的的DOMM技巧运运用在WWeb浏浏览器以以外的应应用环境境里，严严格遵守守“第11级DOOM”能能够让你你们避免免与兼容容性有关关的任何何问题。4.2.2sshowwPicc()函函数的代代码清单单真的不掉掉线吗？、？下面是sshowwPicc()函函数完整整的代码码清单：接下来的的任务是是把这个个JavvaSccrippt函数数与我们们的HTTML文文档结合合起来。4.3JavvaSccrippt函数数的调用用我需要把把刚编写写出来sshowwPicc()函函数与图图片库HHTMLL文档结结合起来来。最简简单的办办法是把把这个函函数用一一组标签插插入到那那个文档档的部分分，但我我认为这

60、这种做法法有点儿儿目光短短浅：如如果今后后想把这这同一函函数用在在多个页页面上的的话，我我将不得得不反复复多次地地进行剪剪贴操作作。为今今后考虑虑，更有有远见的的办法是是先把这这个函数数存入一一个外部部文件，然后在在每一份份需要用用到这个个函数的的HTMML文档档的部分分插入一一个链接接来引用用这个外外部文件件。以.jss作为文文件扩展展名，把把这个函函数存入入一个文文本文件件。完全全可以把把这种文文件命名名为你们们喜欢的的任何东东西，但但我习惯惯于用这这些文件件所包含含的函数数的名字字来命名名它们我给给这个文文件起的的名字是是shoowPiic.jjs。就像我刚刚才决定定把所有有的图片片集中