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