為什么使用圖片庫
在網頁中，如果一張網頁加載太多的圖片，那么這張網頁將會顯示很慢，而且浪費用戶流量，而javasrcipt來創圖片庫將是最佳的選擇：把整個圖片庫的瀏覽鏈接集中安排在圖片庫主頁里，只在用戶點擊了這個頁面里的某個圖片鏈接時才把相應的圖片傳送給他。
方法
<html>
<head>
<script>
function showPic(whichPic){
var source=whichPic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</head>
<body>
<ul>
//return false的話超鏈接的默認行為則不起作用
<li ><a href="image/1.jpg" onclick="showPic(this);return false;">1.jpg</a></li>
<li ><a href="image/2.jpg" onclick="showPic(this);return false;">2.jpg</a></li>
<li ><a href="image/3.jpg" onclick="showPic(this);return false;">3.jpg</a></li>
<li ><a href="image/4.jpg" onclick="showPic(this);return false;">4.jpg</a></li>
<li ><a href="image/5.jpg" onclick="showPic(this);return false;">5.jpg</a></li>
<li ><a href="image/6.jpg" onclick="showPic(this);return false;">6.jpg</a></li>
<li ><a href="image/7.jpg" onclick="showPic(this);return false;">7.jpg</a></li>
<li ><a href="image/8.jpg" onclick="showPic(this);return false;">8.jpg</a></li>
<li ><a href="image/9.png" onclick="showPic(this);return false;">9.png</a></li>
<li ><a href="image/10.png" onclick="showPic(this);return false;">10.png</a></li>
</ul>
<image id="placeholder" src="image/11.jpg" alt="this is picture's placeholder">
</body>
</html>
childNodes屬性：
在一顆節點樹上，childNodes屬性可以用來獲取任何一個元素的所有子元素，它是一個包含這個元素全部子元素的數組
nodeType
- 元素節點的nodeType的屬性值是1
- 屬性節點的nodeType的屬性值是2
- 文本節點的nodeType的屬性值是3
nodeValue屬性
如果想要改變一個文本節點的值就需要使用nodeValue屬性。但nodeValue屬性獲取description對象的值時，得到的并不是包含在這個段落里的文本。
用description.childNodes[0].nodeValue來獲取文本節點的值而不是用description.nodeVlue;其中childNodes[0]等價于firstChild;而lastChild就是這個子節點中最后一個元素
