4.2　编写JavaScript函数

为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。setAttribute()方法是完成这项工作的最佳选择，而我将利用这个方法写一个函数。那个函数只有一个参数，即我想查看的那张图片的链接；它将通过改变“占位符”图片的src属性的办法将其替换为我想查看的那张图片。

首先，需要给函数起一个好的名字。我想让它既能提醒我这个函数的用途，又足够简明扼要。我决定把这个函数命名为showPic()。还需要给这个函数的参数起一个名字，我决定把它命名为whichpic：

whichpic代表着一个元素节点；具体地说，那将是一个指向某个图片的<a>元素。我需要知道那个图片的文件路径，这个路径可以通过在whichpic元素上调用getAttribute()方法的办法查出来——只要把"href"作为参数传递给getAttribute()方法，就可以知道那个图片的文件路径了：

我将把这个路径存入一个变量以便在后面的语句里使用它。我决定把这个变量命名为source：

接下来，还需要把“占位符”图片检索出来，这种事对getElementById()方法来说不过是小菜一碟：

我不想重复敲入“document. getElementById("placerholder")”这么长的字符串，所以将把这个元素赋值给一个变量并将其命名为placerholder：

现在，已经声明并赋值了两个变量：source和placerholder。它们可以让我的脚本简明易读。

我将使用setAttribute()方法对placerholder元素的src属性进行刷新。还记得吗，这个方法有两个参数：一个是打算对之进行设置的属性，另一个是这个属性的新属性值。具体到这个例子，因为我想对src属性进行设置，所以第一个参数是"src"；至于第二个参数，也就是src属性的新属性值，我已经把它保存在source变量里了：

这显然要比下面这么冗长的代码更容易阅读和理解：

4.2.1　DOM^{之前的解决方案}

其实，不使用setAttribute()方法也可以改变某个图片的src属性。

setAttribute()方法是“第1级DOM”（DOM Level 1）的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置。在“第1级DOM”出现之前，程序员只能通过另外一种办法对一部分元素的属性进行设置，这个办法至少在目前还可以用来改变某些属性的值。

例如，如果想改变某个输入元素的value属性，可以使用如下所示的办法：

这与下面这条语句的效果是等价的：

类似的办法也可以用来改变图片的src属性。例如，在我的图片库脚本里，完全可以用下面这条语句来代替setAttribute()调用：

我个人更喜欢使用setAttribute()方法。这起码可以让我不必费心去记忆哪些元素的哪些属性可以用哪些DOM之前的方法去设置。虽然用那些老办法可以毫无问题地对文档里的图片、表单和其他一些元素的属性进行设置，但setAttribute()方法的优势在于它可以对文档中的任何一个元素的任何一个属性做出修改。

“第1级DOM”的另一个优势是可移植性更好。那些老方法只适用于Web文档，DOM则适用于任何一种标记语言。虽然这种差异对我们这个例子没有影响，但我希望大家能够牢牢记住这一点：DOM是一种适用于多种环境和多种程序设计语言的通用型API。如果想把从本书学到的DOM技巧运用在Web浏览器以外的应用环境里，严格遵守“第1级DOM”能够让你们避免与兼容性有关的任何问题。

4.2.2　showPic()函数的代码清单

下面是showPic()函数完整的代码清单：