|
級別: 中級
Brett McLaughlin (brett@newInstance.com), 作家兼編輯, O‘Reilly Media Inc.
2006 年 10 月 12 日
本系列的上一篇文章中考察了文檔對象模型（DOM）編程中涉及到的概念——Web 瀏覽器如何把網頁看作一棵樹，現在您應該理解了 DOM 中使用的編程結構。本期教程將把這些知識用于實踐，建立一個簡單的包含一些特殊效果的 Web 頁面，所有這些都使用 JavaScript 操縱 DOM 來創建，不需要重新加載或者刷新頁面。
前面兩期文章已經詳細介紹了文檔對象模型或者 DOM，讀者應該很清楚 DOM 是如何工作的了。（前兩期 DOM 文章以及 Ajax 系列更早文章的鏈接請參閱參考資料。）本教程中將把這些知識用于實踐。我們將開發一個簡單的 Web 應用程序，其用戶界面可根據用戶動作改變，當然要使用 DOM 來處理界面的改變。閱讀完本文之后，就已經把學習到的關于 DOM 的技術和概念付諸應用了。
假設讀者已經閱讀過上兩期文章，如果還沒有的話，請先看一看，切實掌握什么是 DOM 以及 Web 瀏覽器如何將提供給它的 HTML 和 CSS 轉化成單個表示網頁的樹狀結構。到目前為止我一直在討論的所有 DOM 原理都將在本教程中用于創建一個能工作的（雖然有點簡單）基于 DOM 的動態 Web 頁面。如果遇到不懂的地方，可以隨時停下來復習一下前面的兩期文章然后再回來。
從一個示例應用程序開始
|
關于代碼的說明
為了把注意力集中到 DOM 和 JavaScript 代碼上，我編寫 HTML 的時候有些隨意地采用內聯樣式（比如 h1 和 p 元素的 align 屬性）。雖然對實驗來說這樣做是可接受的，但是對于開發的任何產品應用程序，我建議花點時間把所有的樣式都放到外部 CSS 樣式表中。
|
|
我們首先建立一個非常簡單的應用程序，然后再添加一點 DOM 魔法。要記住，DOM 可以移動網頁中的任何東西而不需要提交表單，因此足以和 Ajax 媲美；我們創建一個簡單的網頁，上面只顯示一個普通的舊式大禮帽，還有一個標記為 Hocus Pocus! 的按鈕（猜猜這是干什么的？）
初始 HTML
清單 1 顯示了這個網頁的 HTML。除了標題和表單外，只有一個簡單的圖片和可以點擊的按鈕。
清單 1. 示例應用程序的 HTML
<html>
<head>
<title>Magic Hat</title>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
可以在本文后面的下載中找到這段 HTML 和本文中用到的圖片。不過我強烈建議您只下載那個圖片，然后隨著本文中逐漸建立這個應用程序自己動手輸入代碼。這樣要比讀讀本文然后直接打開完成的應用程序能夠更好地理解 DOM 代碼。
查看示例網頁
這里沒有什么特別的竅門，打開網頁可以看到圖 1 所示的結果。
圖 1. 難看的大禮帽
關于 HTML 的補充說明
應該 注意的重要一點是，清單 1 和圖 1 中按鈕的類型是 button 而不是提交按鈕。如果使用提交按鈕，單擊該按鈕將導致瀏覽器提交表單，當然表單沒有 action 屬性（完全是有意如此），從而會造成沒有任何動作的無限循環。（應該自己試試，看看會發生什么。）通過使用一般輸入按鈕而不是提交按鈕，可以把 javaScript 函數和它連接起來與瀏覽器交互而無需 提交表單。
向示例應用程序添加元素
現在用一些 JavaScript、DOM 操作和小小的圖片戲法裝扮一下網頁。
使用 getElementById() 函數
顯然，魔法帽子沒有兔子就沒有看頭了。這里首先用兔子的圖片替換頁面中原有的圖片（再看看圖 1），如圖 2 所示。
圖 2. 同樣的禮帽，這一次有了兔子
完成這個 DOM 小戲法的第一步是找到網頁中表示 img 元素的 DOM 節點。一般來說，最簡單的辦法是用 getElementById() 方法，它屬于代表 Web 頁面的 document 對象。前面已經見到過這個方法，用法如下：
var elementNode = document.getElementById("id-of-element");
|
為 HTML 添加 id 屬性
這是非常簡單的 JavaScript，但是需要修改一下 HTML：為需要訪問的元素增加 id 屬性。也就是希望（用帶兔子的新圖片）替換的 img 元素，因此將 HTML 改為清單 2 的形式。
清單 2. 增加 id 屬性
<html>
<head>
<title>Magic Hat</title>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
如果重新加載（或者打開）該頁面，可以看到毫無變化，增加 id 屬性對網頁的外觀沒有影響。不過，該屬性可以幫助 JavaScript 和 DOM 更方便地處理元素。
抓住 img 元素
現在可以很容易地使用 getElementById() 了。已經有了需要元素的 ID，即 topHat，可以將其保存在一個新的 JavaScript 變量中。在 HTML 頁面中增加清單 3 所示的代碼。
清單 3. 訪問 img 元素
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
現在打開或重新加載該網頁同樣沒有什么驚奇的地方。雖然現在能夠訪問圖片，但是對它還什么也沒有做。
修改圖片，麻煩的辦法
完成所需修改有兩種方法：一種簡單，一種麻煩。和所有的好程序員一樣，我也喜歡簡單的辦法；但是運用較麻煩的辦法是一次很好的 DOM 練習，值得您花點時間。首先看看換圖片比較麻煩的辦法；后面再重新分析一下看看有沒有更簡單的辦法。
用帶兔子的新照片替換原有圖片的辦法如下：
- 創建新的
img 元素。
- 訪問當前
img 元素的父元素，也就是它的容器。
- 在已有
img 元素之前 插入新的 img 元素作為該容器的子級。
- 刪除原來的
img 元素。
- 結合起來以便在用戶單擊 Hocus Pocus! 按鈕時調用剛剛創建的 JavaScript 函數。
創建新的 img 元素
通過上兩期文章應該記住 DOM 中最關鍵的是 document 對象。它代表整個網頁，提供了 getElementById() 這樣功能強大的方法，還能夠創建新的節點。現在要用到的就是這最后一種性質。
具體而言，需要創建一個新的 img 元素。要記住，在 DOM 中一切都是節點，但是節點被進一步劃分為三種基本類型：
還有其他類型，但是這三種可以滿足 99% 的編程需要。這里需要一個 img 類型的新元素。因此需要下列 JavaScript 代碼：
var newImage = document.createElement("img");
|
這行代碼可以創建一個 element 類型的新節點，元素名為 img。在 HTML 中基本上就是：
要記住，DOM 會創建結構良好的 HTML，就是說這個目前為空的元素包括起始和結束標簽。剩下的就是向該元素增加內容或屬性，然后將其插入到網頁中。
對內容來說，img 是一個空元素。但是需要增加一個屬性 src，它指定了要加載的圖片。您也許認為要使用 addAttribute() 之類的方法，但情況并非如此。DOM 規范的制定者認為程序員可能喜歡簡潔（的確如此！），因此他們規定了一個方法同時用于增加新屬性和改變已有的屬性值：setAttribute()。
如果對已有的屬性調用 setAttribute()，則把原來的值替換為指定的值。但是，如果調用 setAttribute() 并指定一個不 存在的屬性，DOM 就會使用提供的值增加一個屬性。一個方法，兩種用途！因此需要增加下列 JavaScript 代碼：
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
|
它創建一個圖片元素然后設置適當的資源屬性。現在，HTML 應該如清單 4 所示。
清單 4. 使用 DOM 創建新圖片
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
可以加載該頁面，但是不要期望有任何改變，因為目前所做的修改實際上還沒有影響頁面。另外，如果再看看任務列表中的第 5 步，就會發現還沒有調用我們的 JavaScript 函數！
獲得原始圖片的父元素
現在有了要插入的圖片，還需要找到插入的地方。但是不能將其插入到已有的圖片中，而是要將其插入到已有圖片之前然后再刪除原來的圖片。為此需要知道已有圖片的父元素，實際上這就是插入和刪除操作的真正關鍵所在。
應該記得，前面的文章中曾經指出 DOM 確實把網頁看成一棵樹，即節點的層次結構。每個節點都有父節點（樹中更高層次的節點，該節點是它的一個子級），可能還有自己的子節點。對于圖片來說，它沒有子級 —— 要記住圖片是空元素，但是它肯定有父節點。甚至不需要知道父節點是什么，但是需要訪問它。
為此，只要使用每個 DOM 節點都有的 parentNode 屬性即可，比如：
var imgParent = hatImage.parentNode;
|
確實非常簡單！可以肯定這個節點有子節點，因為已經有了一個：原來的圖片。此外，完全不需要知道它是一個 div、p 或者頁面的 body，都沒有關系！
插入新圖片
現在得到了原來圖片的父節點，可以插入新的圖片了。很簡單，有多種方法可以添加子節點：
insertBefore(newNode, oldNode)
appendChild(newNode)
因為希望把新圖片放在舊圖片的位置上，需要使用 insertBefore()（后面還要使用 removeChild() 方法）。可使用下面這行 JavaScript 代碼把新圖片元素插入到原有圖片之前：
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
|
現在原圖片的父元素有了兩個 子元素：新圖片和緊跟在后面的舊圖片。必須指出，這里包圍 這些圖片的內容沒有變，而且這些內容的順序也和插入之前完全相同。僅僅是這個父節點中增加了一個子節點，即舊圖片之前的新圖片。
刪除舊圖片
現在只需要刪除舊圖片，因為網頁中只需要新圖片。很簡單，因為已經得到了舊圖片元素的父節點。只要調用 removeChild() 并把需要刪除的節點傳遞給它即可：
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
|
現在，用新圖片替換舊圖片的工作已基本完成了。HTML 應該如清單 5 所示。
清單 5. 用新圖片替換舊圖片
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.insertBefore(newImage, hatImage);
imgParent.removeChild(hatImage);
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" />
</p>
</form>
</body>
</html>
|
連接 JavaScript
最后一步，可能也是最簡單的，就是把 HTML 表單連接到剛剛編寫的 JavaScript 函數。需要每當用戶點擊 Hocus Pocus! 按鈕的時候運行 showRabbit() 函數。為此只要向 HTML 中增加一個簡單的 onClick 事件處理程序即可。
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
|
這種簡單的 JavaScript 編程應該非常容易了。將其添加到 HTML 頁面中，保存它然后在 Web 瀏覽器中打開。頁面初看起來應該和圖 1 相同，但是點擊 Hocus Pocus! 后應該看到圖 3 所示的結果。
圖 3. 兔子戲法
替換圖片，簡單的辦法
如果回顧替換圖片的步驟，再看看節點的各種方法，可能會注意到方法 replaceNode()。該方法可用于把一個節點替換為另一個節點。再考慮一下前面的步驟：
- 創建新的
img 元素。
- 訪問當前
img 元素的父元素，也就是它的容器。
- 在已有
img 元素之前 插入新的 img 元素作為該容器的子元素。
- 刪除原來的
img 元素。
- 連接起來以便在用戶點擊 Hocus Pocus! 的時候調用剛剛創建的 JavaScript 函數。
使用 replaceNode() 可以減少需要的步驟數。可以將第 3 步和第 4 步合并在一起：
- 創建新的
img 元素。
- 訪問當前
img 元素的父元素，也就是它的容器。
- 用創建的新元素替換舊的
img 元素。
- 連接起來以便在用戶點擊 Hocus Pocus! 的時候調用剛剛創建的 JavaScript 函數。
這看起來不是什么大事，但確實能夠簡化代碼。清單 6 說明了這種修改：去掉了 insertBefore() 和 removeChild() 方法調用。
清單 6. 用新圖片替換舊圖片（一步完成）
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
var imgParent = hatImage.parentNode;
imgParent.replaceChild(newImage, hatImage);
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
當然這不是什么大的修改，但是說明了 DOM 編碼中一件很重要的事：執行一項任務通常有多種方法。如果仔細審閱可用 DOM 方法看看是否有更簡單的方法可以完成任務，很多時候都會發現可以將四五個步驟壓縮為兩三個步驟。
替換圖片，（真正）簡單的辦法
既然指出了執行一項任務幾乎總是有更簡單的方法，現在就說明用兔子圖片替換帽子圖片的簡單得多 的辦法。閱讀本文的過程中有沒有想到這種方法？提示一下：與屬性有關。
要記住，圖片元素很大程度上是由其 src 屬性控制的，他引用了某個地方的文件（不論是本地 URI 還是外部 URL）。到目前為止，我們一直用新圖片替換圖片節點，但是直接修改已有圖片的 src 屬性要簡單得多！這樣就避免了創建新節點、尋找父節點和替換舊節點的所有工作，只要一步就能完成了：
hatImage.setAttribute("src", "rabbit-hat.gif");
|
這樣就夠了！看看清單 7，它顯示了這種解決方案，包括整個網頁。
清單 7. 修改 src 屬性
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
這是 DOM 最棒的一點：更新屬性的時候網頁馬上就會改變。只要圖片指向新的文件，瀏覽器就加載該文件，頁面就更新了。不需要重新加載，甚至不需要創建新的圖片元素！結果仍然和圖 3 相同，只不過代碼簡單得多了。
把兔子藏起來
現在網頁看起來很漂亮，但是仍然有點原始。雖然兔子從帽子中跳出來了，但是屏幕下方的按鈕仍然顯示 Hocus Pocus! 和調用 showRabbit()。這就是說如果在兔子出來之后仍然點擊按鈕，就是在浪費處理時間。更重要的是，它毫無用處，而沒有用的按鈕不是好東西。我們來看看能否利用 DOM 再作一些修改，無論兔子在帽子里還是出來都讓這個按鈕派上用場。
修改按鈕的標簽
最簡單的是當用戶點擊按鈕之后改變它的標簽。這樣就不會看起來像還有什么魔法，網頁中最糟糕的就是暗示用戶錯誤的東西。在修改按鈕的標簽之前需要訪問該節點，而在此之前需要引用按鈕 ID。這是老套路了，清單 8 為按鈕增加了 id 屬性。
清單 8. 增加 id 屬性
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
現在用 JavaScript 訪問按鈕很簡單了：
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
}
|
當然，您可能已經輸入了下面這行 JavaScript 來改變按鈕的標簽值。這里再次用到了 setAttribute()：
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
}
|
通過這個簡單的 DOM 操作，兔子跳出來之后按鈕的標簽馬上就會改變。現在，HTML 和完成的 showRabbit() 函數如清單 9 所示。
清單 9. 完成的網頁
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
button.setAttribute("value", "Get back in that hat!");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
把兔子收回去
從此新的按鈕標簽中可能已經猜到，現在要把兔子收回帽子中去。基本上和放兔子出來完全相反：將圖片的 src 屬性再改回舊圖片。創建一個新的 JavaScript 函數來完成這項任務：
function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
}
|
實際上僅僅把 showRabbit() 函數的功能翻轉了過來。將圖片改為原來的沒有兔子的大禮帽，抓取按鈕，將標簽改為 Hocus Pocus!
事件處理程序
現在這個示例應用程序有一個大問題：雖然按鈕的標簽 改變了，但是單擊按鈕時的動作沒有 變。幸運的是，當用戶單擊按鈕時可以使用 DOM 改變事件或者發生的動作。因此，如果按鈕上顯示 Get back in that hat!，點擊的時候需要運行 hideRabbit()。相反，一旦兔子藏了起來，按鈕又返回來運行 showRabbit()。
|
避免使用 addEventHandler()
除了 onclick 屬性外，還有一個方法可用于添加 onClick 或 onBlur 這樣的事件處理程序，毫不奇怪這個方法就叫 addEventHandler()。不幸的是，Microsoft? Internet Explorer? 不支持這個方法，如果在 JavaScript 中使用它，就會有數百萬 Internet Explorer 用戶除了錯誤外從網頁中什么也看不到（可能還有抱怨）。不使用這個方法，應用本文中介紹的辦法也能達到同樣的效果，而且在 Internet Explorer 上也有效。
|
|
查看 HTML 就會發現這里處理的事件是 onClick。在 JavaScript 中，可以通過按鈕的 onclick 的屬性來引用該事件。（要注意，在 HTML 中該屬性通常稱為 onClick，其中 C 大寫；而在 JavaScript 中則稱為 onclick，全部小寫。）因此可以改變按鈕觸發的事件：只要賦給 onclick 屬性一個新的函數。
但是有點細微的地方：onclick 屬性需要提供函數引用——不是函數的字符串名稱，而是函數本身的引用。在 JavaScript 中，可以按名稱引用函數，不需要帶括號。因此可以這樣修改點擊按鈕時執行的函數：
button.onclick = myFunction;
|
因此在 HTML 中作這種修改很簡單。看看清單 10，它切換按鈕觸發的函數。
清單 10. 改變按鈕的 onClick 函數
<html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
button.onclick = hideRabbit;
}
function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
button.onclick = showRabbit;
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
這樣就得到了一個完成的、可以使用的 DOM 應用程序。自己試試吧！
結束語
現在您應該非常熟悉 DOM 了。前面的文章介紹了使用 DOM 所涉及到的基本概念，詳細地討論了 API，現在又建立一個簡單的基于 DOM 的應用程序。一定要花點時間仔細閱讀本文，并自己嘗試一下。
雖然這是專門討論文檔對象模型的系列文章的最后一期，但肯定還會看到其他關于 DOM 的文章。事實上，如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很難做多少事，至少在一定程度上如此。無論要創建復雜的突出顯示還是移動效果，或者僅僅處理文本塊或圖片，DOM 都提供了一種非常簡單易用的訪問 Web 頁面的方式。
如果對如何使用 DOM 仍然感覺沒有把握，花點時間溫習一下這三篇文章；本系列的其他文章在使用 DOM 的時候不再多作解釋，讀者也不希望迷失在這些細節之中而忽略關于其他概念的重要信息，比如 XML 和 JSON。為了保證能夠熟練地使用 DOM，自己編寫幾個基于 DOM 的應用程序試試，這樣就很容易理解后面將要討論的一些數據格式問題了。
下載
| 描述 |
名字 |
大小 |
下載方法 |
| 僅下載示例中的圖形 |
wa-ajaxintro6/ajax_6-images_download.zip |
91 KB |
HTTP |
| 完整的示例，包括 HTML 和圖形 |
wa-ajaxintro6/ajax_6-complete_examples.zip |
93 KB |
HTTP |
參考資料
學習
獲得產品和技術
討論
關于作者
|
