4.4　对JavaScript函数进行功能扩展

在同一个网页上切换显示不同的图片并不是什么新鲜事。有着这类效果的网页和脚本早在W3C推出它们的标准化DOM和JavaScript语言之前就已经出现了，如今更是得到了广泛的流行。

在这种情形下，如果你们想让自己与众不同，就必须另辟蹊径——你们有没有想过在同一个网页上切换显示不同的文本？我可不是在开玩笑，利用JavaScript语言和DOM，确实可以做到这一点。

图片库HTML文档里的每个图片链接都有一个title属性。我想把这个属性的值提取出来并让它们伴随相应的图片一同显示在网页上。title属性的值可以用getAttribute()方法轻而易举地提取出来，如果把下面这条语句添加到showPic()函数的开头的话，就可以把title属性的值保存到一个变量里：

解决了提取title属性值的问题，还需要把它插入到HTML文档中的适当位置。为了完成这一工作，我需要用到几个新的DOM属性。

4.4.1　childNodes属性

childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。

childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素：

假设我们需要把某个文档的body元素的全体子元素检索出来。首先，我们将使用getElementsByTagName()方法来得到body元素。因为每份文档只有一个body元素，所以它将是getElementsByTagName("body")方法所返回的数组中的第一个（也是唯一一个）元素：

现在，变量body_element已经指向了那个文档的body元素。接下来，可以用如下所示的语法记号把body元素的全体子元素检索出来：

写出这个记号显然要比敲入下面这个长长的字符串要简明得多：

顺便说一句，body元素还有一个更简单的专用记号：

现在，已经知道如何把body元素的全体子元素检索出来了，我们来看看这些信息的用途。

首先，我们可以精确地查出body元素有多少个子元素。因为childNodes属性返回的是一个数组，所以可以用数组数据类型的length属性查出它所包含的元素的个数：

请把下面这个小函数添加到showPic.js文件里：

这个简单的小函数将弹出一个alert对话框，其显示内容是body元素的子元素的总数。

我想让这个函数在页面加载时执行，而这需要使用onload事件处理函数。把下面这条语句添加到代码段的末尾：

这条语句将在页面加载时调用countBodyChildren函数。

在Web浏览器里刷新gallery.html文件。你们将看到一个alert对话框，其显示内容是body元素的子元素的总数。那个数字很可能会让你们大吃一惊。

4.4.2　nodeType属性

根据gallery.html文件的结构，body元素应该只有3个子元素：一个h1元素、一个ul元素和一个imag元素。可是，countBodyChildren()函数给出来的数字却远大于此。之所以会这样，是因为文档树的节点类型并非只有元素节点一种。

由childNodes属性返回的数组包含着所有类型的节点，除了所有的元素节点，所有的属性节点和文本节点也包含在其中。事实上，文档里几乎每一样东西都是一个节点——甚至连空格和换行符都会被解释为节点，而它们也全都包含在childNodes属性所返回的数组当中。

因此，countBodyChildren()函数的返回结果才会是一个相当大的数字。

还好，我们可以利用nodeType属性来区分文档里的各个节点。这个属性可以让我们知道自己正在与哪一种节点打交道。不过，这个属性返回的是一个数字而不是像“element”或“attribute”那样的英文字符串。

下面是nodeType属性的调用语法：

为了验证这一点，请把countBodyChildren()函数中的alter语句替换为下面这条语句，这样一来，我们就可以知道body_element元素的nodeType属性了：

在Web浏览器里刷新gallery.html文件，将看到一个显示数字“1”的alert对话框。换句话说，元素节点的nodeType属性值是1。

nodeType属性总共有12种可取值，但其中仅有3种具有实用价值：元素节点、属性节点和文本节点的nodeType属性值分别是1、2和3。

  ●元素节点的nodeType属性值是1。

  ●属性节点的nodeType属性值是2。

  ●文本节点的nodeType属性值是3。

这个意味着，可以让我们的函数只对某种特定类型的节点进行处理。例如，完全可以编写出一个只对元素节点进行处理的函数。

4.4.3　在HTML文档里增加一段描述性文本

为了让我的“JavaScript美术馆”变得与众不同，我决定给它增加一个文本节点。我想在显示图片时把这个文本节点的值替换为一个来自某个属性节点（某个图片链接的title属性）的值。

首先，需要为打算显示的文本安排显示位置。我将在gallery.html文件里增加一个新的文本段。我决定把它安排在<img>标签之前。我将为它设置一个独一无二的id值，这样就能在JavaScript函数里方便地引用它了：

上面这条语句将把<p>元素的id属性设置为description（描述），这个单词可以让这个元素的用途一目了然。如下所示，包含在此元素里的文本现在是“Choose an image.”，但我打算在切换显示图片时把这段文本同时替换为相应的描述性文字。

我想达到的预期效果是：在“JavaScript美术馆”里的某个图片链接被点击时，不仅要把“占位符”图片替换为那个链接的href属性所指向的图片，还要把这段文本同时替换为那个链接的title属性值。为了实现这一想法，需要对showPic()函数做一些改进。

4.4.4　用JavaScript代码改变<p>元素的文本内容

为了把“JavaScript美术馆”里的图片说明在某个图片链接被点击时，动态地替换为那个链接的title属性值，我需要对showPic()函数做一些修改。

下面是showPic()函数现在的样子：

首先，我需要在showPic()函数里增加一些语句来提取whichpic对象的title属性值。我将把提取到的title属性值存入text变量。这些事可以轻而易举地利用getAttribute()方法完成：

接下来，为了让自己能在代码里方便地引用那段id属性值等于description的文本，我决定创建一个新的变量来存放它：

下面是showPic()函数在我给它增加了上述两个变量之后的样子：

我们的下一个任务是实现文本的切换显示效果。

4.4.5　nodeValue属性

如果想改变某个文本节点的值，那就使用DOM提供的nodeValue属性，它的用途正是检索（和设置）节点的值：

但这里有个大家必须注意的细节：在用nodeValue属性检索description对象的值时，你得到的并不是包含在这个段落里的文本。可以用下面这条alert语句来验证这一点：

这个调用将返回一个null值。<p>元素的nodeValue属性值是一个空值，而我们这里需要的是<p>元素所包含的文本的值。

包含在<p>元素里的文本是另一种节点，它在DOM里是<p>元素的第一个子节点。换句话说，如果想获得<p>元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值。

下面这条alert语句可以找到我们想要的内容：

这个调用的返回值才是我们正在寻找的“Choose an image.”。这个值来自childNodes[]数组的第一个（下标是0）元素。

4.4.6　firstChild和lastChild属性

数组元素childNodes[0]有个更直观易读的同义词。无论何时何地，只要需要访问childNodes[]数组的第一个元素，我们都可以把它写成firstChild，这个记号本身是一个属性：

这种用法与下面这个语法记号完全等价：

单词“firstChild”不仅更加简短，还更加具有可读性。

DOM还提供了一个与之对应的lastChild属性：

这个语法记号代表着childNodes[]数组的最后一个元素。如果不想通过lastChild属性去访问这个节点，我们将不得不使用如下所示的语法记号：

与简明易懂的lastChild相比，这么复杂的语法记号恐怕没人会喜欢。