JavaScript：gallery

本章我们将要实现一个更强大的功能：

当我们点击图片时，图片可以显示在当前页面的某个位置；而不用创建新的网页窗口；
案例的代码在”http://friendsofed.com/

实现此功能的思路是

• 我们在此网页上开辟一块区域供浏览图片，可以在这里先放上一张图片，称为占位图；
• 当我们点击图片链接时，将图片的地址传递给占位图的地址参数href；
• 当我们点击链接时可能会跳转到新的窗口，为避免这种操作发生，我们需要使用事件处理函数onclick

首先我们编写函数来实现路径的传递

function showPic( whichPic )

whichPic是一个元素节点，指向我们点击的某张图片的<a>元素；
使用getAttribute()方法来获取点击图片的路径并赋值给变量source：

var source=whichPic.getAttribute("href")

创建指向占位图路径的元素节点placeholder，再通过setAttribute()方法来将点击图片的路径赋值给占位图的路径：

var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source)

整个函数代码如下：

function showPic(whichpic) {    var source = whichpic.getAttribute("href");    var placeholder = document.getElementById("placeholder");    placeholder.setAttribute("src",source);}

最后我们要建立HTML和JavaScript的连接，只需创建.js文件，将代码复制进文件；在HTML的head元素里加入语句<script type="text/javascript" src="scripts/showPic.js"></script>
现在连接已经建立，我们还需要让浏览器知道当我们点击图片链接时，函数立马被调用，这时我们就需要事件处理函数。

事件处理函数
onmouseover：鼠标停留时的操作语句；
onmouseout：鼠标移开时的操作语句；
onclick：鼠标点击时的操作语句；

我们需要在每个图片的<a>元素里加上onclick="showPic(this)"，this是关键字，意指“这个元素”，即<a>元素；
我们还要点击图片时不跳转到新的页面，只要命令`onclick=”return false”，如下所示：

<ul>    <li>        <a href="images/1.jpg" title="A fireworks display" onclick="showPic(this);return false">Fireworks</a>    </li>    <li>        <a href="images/2.jpg" title="A cup of black coffee" onclick="showPic(this);return false">Coffee</a>    </li>    <li>    <a href="images/3.jpg" title="A red, red rose" onclick="showPic(this);return false">Rose</a>    </li>    <li>    <a href="images/4.jpg" title="The famous clock" onclick="showPic(this);return false">Big Ben</a>    </li></ul>

扩展
childNodes是类似于上面getAttribute之类的方法，可以返回一个元素节点下的全体子元素的数组。
nodeType，返回某节点的元素节点数；
nodeValue方法，检索和设置节点的值；
在书中，<p>元素的第一个子元素是文本；