本文介紹了使用DOM的簡單方法實現動態加載圖片的功能。
前文介紹了：
1 DOM四個常用的方法
首先看一下效果，初始時是一個相冊，可以點擊導航，切換圖片，并切換下方顯示內容：
點擊house，可以動態的切換另一個圖片
所使用的代碼，如下：
<!doctype html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的相冊</title><style type="text/css">body {font-family: "Helvetica","Arial",sans-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;}li {float: left;padding: 1em;list-style: none;}img {clear:both;display: block;}</style></head><body><h1>我的相冊</h1><ul><li><a href="images/pig.png" title="I'm pig!" οnclick="showPic(this);return false;">Pig</a></li><li><a href="images/rabit.png" title="I'm rabit!" οnclick="showPic(this);return false;">Rabit</a></li><li><a href="images/house.png" title="I'm house!" οnclick="showPic(this);return false;">house</a></li><li><a href="images/monkey.png" title="I'm monkey!" οnclick="showPic(this);return false;">monkey</a></li></ul><img id="placeHolder" alt="image" src="images/pig.png"/><p id="description">Choose an image.</p><script type="text/javascript">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;}</script></body> </html>
代碼解析
在這篇示例代碼中，主要需要了解的內容是:
1 如何獲取元素對象的屬性
2 如何動態設置元素對象的屬性值
3 如何攔截click事件
4 如何動態設置元素文本
5 float浮動
1&2 獲取設置元素對象的屬性
前篇已經介紹過了，獲取設置元素的屬性，可以使用getAttribute()和setAttribute()兩個方法:
在showPic()函數中，通過傳過來的對象，可以直接調用getAttribute獲取屬性href的鏈接內容，然后通過getElementById方法獲取圖片對象，并設置其src的屬性值。
var source = whichPic.getAttribute("href"); var placeHolder = document.getElementById("placeHolder"); placeHolder.setAttribute("src",source);
3 onclick事件
上面已經創建好了showPic()方法，只要傳入對象即可。因此在a標簽中，使用onclick事件，即可。
但是onClick事件，是要接收一個bool值，如果是true，則會默認的跳到另一個網頁鏈接；相反，如果是false，則不會產生任何結果。
因此在onClick事件中需要如下書寫：
<a href="images/pig.png" title="I'm pig!" οnclick="showPic(this);return false;">Pig</a>
4 動態設置文本
如果想要使用元素對象的文本，使用nodeValue就可以了。但是如果直接使用，會得到null值。
因為，元素對象本身是沒有文本的，但是它有childNodes對象、firstChild和lastChild對象。
展開他的childNodes屬性可以發現，該屬性中包含一個對象：
該對象中有nodeValue屬性，對應的才是標簽對應的內容。
由于該標簽中只有一個對象，因此使用?firstChild?和?lastChild?或者?childNodes[0]?都可以獲取到該對象。
其中的原理，類似前面文章講述的元素節點，屬性節點和文本節點的關系，文本節點是該元素標簽節點的一個子對象，因此無法用nodeValue直接獲取標簽的文本，而是需要獲取它的孩子對象，才能得到nodeValue。
5 float浮動
如果不設置img的CSS樣式，會發現本來我們想要使ul中的li標簽水平顯示，結果在寬度足夠的情況下，img也跟著水平顯示了。
這是為什么呢？
查閱資料發現，原來傳統的文檔對象是按照文檔布局來顯示的：由上到下，由左到右，遇到塊級元素則換行，遇到內聯元素則補齊。
如果使用float浮動，會打破該布局，如果給對象設置上了float屬性，則會導致文檔布局時，出現一定的空隙，那么這個空隙就會讓下一個元素來填充了。
因此上面的圖片布局中，img元素會隨著ul中li的float一起浮動顯示。
而clear:both則是為了預防float引起的布局錯亂，可以使用clear清除布局設置。這樣img就不會與前面的li產生同樣的float效果了。
但是雖然清除了浮動，但由于img元素屬于內聯元素，因此只要把它轉換成塊級元素，就可以產生換行的效果了。
img {clear:both;display: block;} ?
參考
【1】float詳解：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html
【2】《JavaScript DOM 編程藝術》
【3】巧用clear:both：http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html
【4】display：http://www.w3school.com.cn/cssref/pr_class_display.asp
【5】塊級元素與內聯元素：http://www.cnblogs.com/NetSos/archive/2010/08/31/1814223.html
--v$session_longops)
--v$db_object_cache)
