利用JavaScript來創建圖片庫將是最佳的選擇：把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里，只在用戶點擊了這個主頁里的某個鏈接時才把相應的圖片傳送給他。
標記
- 創建鏈接清單
使用無序清單元素(ul)或者有序清單元素(ol)來列出那些鏈接。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a></li>
<li><a href="images/coffee.jpg" title="A cup of black coffee">Coffee</a></li>
<li><a href="images/rose.jpg" title="A red,red rose">Rose</a></li>
<li><a href="images/bigben.jpg" title="The famous clock">Big Ben</a></li>
</ul>
</body>
</html>
改進
- 點擊鏈接上在原本的網頁下方打開圖片。
步驟 - 增加占位符在主頁上為圖片預留一個瀏覽區域。
- 點擊某個鏈接時，攔截這個網頁的默認行為
- 把“占位符”圖片替換為與那個鏈接相對應的圖片
function showPic(whichpic) {
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
PS：當然也有非DOM的解決方案，通過element.value="the new value"修改，這條語句與element.setAttribute("value","the new value");等價。不過DOM的好處就是可移植性非常強。
- 應用JS文件
...
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<body>
...
- 添加事件處理函數
添加事件的語法： event＝"JavaScript statement(s)",請注意JavaScript代碼包含在一對引號之間。我們可以把任意數量的JavaScript語句放在這對引號之間，只要把各條語句用分號分開即可。
事件處理的工作機制。在給某個元素添加了事件處理函數后，一旦事件發生，相應的JS代碼就會得到執行。被調用的JS代碼可以返回一個值，這個值將被傳遞給事件處理函數。例如我們給某個鏈接添加一個onclick事件處理函數，并讓這個處理函數所出發的JS代碼返回的值是true或false。當鏈接唄點擊時，如果JS代碼返回的是true,onclick事件處理函數就認為這個鏈接唄點擊了。反之，如果返回的值是false，onclick事件處理函數就認為這個鏈接沒有被點擊。
在onclick事件處理函數所觸發的JS代碼中添加一條return false，這個鏈接的默認行為就不會被處罰，就可以防止用戶被帶到目標鏈接窗口。
拓展
childNodes屬性
在一顆節點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是包含一個元素全部子元素的數組：
element.childNodes
假設需要把某個文檔的body元素的全體子元素檢索出來。
var body_element=document.getElementsByTagName("body")[0];
body_element.childNodes;//獲取到body下所有的元素
body_element.childNodes.length//body中獲取多少個元素
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<script type="text/javascript" src="scripts/showpicture.js"></script>
<script type="text/javascript">
window.onload=countBodyChildren;
</script>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);">Fireworks</a></li>
<li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a></li>
<li><a href="images/rose.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rose</a></li>
<li><a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
</ul>
</body>
</html>
PS：上面彈出的節點數是7個，除了h1、ul、img，還有哪些元素呢？
文檔樹的節點類型并非只有元素節點一種。文檔中幾乎每一樣東西都是一個節點，甚至連空格和換行符都會被解釋為節點，而他們也全部包含在childNodes屬性所返回的數組中。
通過node.nodeType獲取節點的nodeType屬性。
nodeType屬性總共有12種可取值，其中有3中具有實用價值。
- 元素節點的nodeType屬性值是1
- 屬性節點的nodeType屬性值是2
- 文本節點的nodeType屬性值是3
實例拓展，在圖片下面添加一個文本，文本內容隨鏈接內容的改變，現實對應的title。
...
</ul>
<p id="description">Choose an image</p>
</body>
...
添加p如上所示。
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
PS：那description.nodeValue返回什么呢？返回一個null，因為p元素的nodeValue屬性是一個空值，實際上我們需要獲取元素中包含的文本的值。
description.childNodes[0].nodeValue;
childNodes[0]的等價寫法是node.firstChild。與之相對應的還有node.lastChild，其等價寫法是node.childNodes[node.childNodes.length-1]。
nodeValue屬性不僅可以用來檢索節點的值，還可以用來設置節點的值
對應的JS代碼如下:
function showPic(whichpic) {
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}
加上css：
body{
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
u1{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
display: block;
clear: both;
}
