|
級別: 中級
Brett McLaughlin ([email protected]), 作家兼編輯, O‘Reilly Media Inc.
2006 年 10 月 12 日
本系列的上一篇文章中考察了文檔對象模型（DOM）編程中涉及到的概念——Web 瀏覽器如何把網(wǎng)頁看作一棵樹，現(xiàn)在您應(yīng)該理解了 DOM 中使用的編程結(jié)構(gòu),。本期教程將把這些知識用于實(shí)踐,，建立一個簡單的包含一些特殊效果的 Web 頁面，所有這些都使用 JavaScript 操縱 DOM 來創(chuàng)建,，不需要重新加載或者刷新頁面,。
前面兩期文章已經(jīng)詳細(xì)介紹了文檔對象模型或者 DOM,，讀者應(yīng)該很清楚 DOM 是如何工作的了。（前兩期 DOM 文章以及 Ajax 系列更早文章的鏈接請參閱參考資料,。）本教程中將把這些知識用于實(shí)踐,。我們將開發(fā)一個簡單的 Web 應(yīng)用程序，其用戶界面可根據(jù)用戶動作改變,，當(dāng)然要使用 DOM 來處理界面的改變,。閱讀完本文之后,，就已經(jīng)把學(xué)習(xí)到的關(guān)于 DOM 的技術(shù)和概念付諸應(yīng)用了。
假設(shè)讀者已經(jīng)閱讀過上兩期文章，如果還沒有的話,，請先看一看,，切實(shí)掌握什么是 DOM 以及 Web 瀏覽器如何將提供給它的 HTML 和 CSS 轉(zhuǎn)化成單個表示網(wǎng)頁的樹狀結(jié)構(gòu),。到目前為止我一直在討論的所有 DOM 原理都將在本教程中用于創(chuàng)建一個能工作的（雖然有點(diǎn)簡單）基于 DOM 的動態(tài) Web 頁面,。如果遇到不懂的地方，可以隨時停下來復(fù)習(xí)一下前面的兩期文章然后再回來,。
從一個示例應(yīng)用程序開始
 |
關(guān)于代碼的說明
為了把注意力集中到 DOM 和 JavaScript 代碼上,，我編寫 HTML 的時候有些隨意地采用內(nèi)聯(lián)樣式（比如 h1 和 p 元素的 align 屬性）。雖然對實(shí)驗(yàn)來說這樣做是可接受的,，但是對于開發(fā)的任何產(chǎn)品應(yīng)用程序,，我建議花點(diǎn)時間把所有的樣式都放到外部 CSS 樣式表中。
|
|
我們首先建立一個非常簡單的應(yīng)用程序,，然后再添加一點(diǎn) DOM 魔法,。要記住，DOM 可以移動網(wǎng)頁中的任何東西而不需要提交表單,，因此足以和 Ajax 媲美,；我們創(chuàng)建一個簡單的網(wǎng)頁，上面只顯示一個普通的舊式大禮帽,，還有一個標(biāo)記為 Hocus Pocus! 的按鈕（猜猜這是干什么的,？）
初始 HTML
清單 1 顯示了這個網(wǎng)頁的 HTML。除了標(biāo)題和表單外,，只有一個簡單的圖片和可以點(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)烈建議您只下載那個圖片,，然后隨著本文中逐漸建立這個應(yī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án),。（應(yīng)該自己試試,，看看會發(fā)生什么。）通過使用一般輸入按鈕而不是提交按鈕,，可以把 javaScript 函數(shù)和它連接起來與瀏覽器交互而無需 提交表單,。
向示例應(yīng)用程序添加元素
現(xiàn)在用一些 JavaScript、DOM 操作和小小的圖片戲法裝扮一下網(wǎng)頁,。
使用 getElementById() 函數(shù)
顯然,，魔法帽子沒有兔子就沒有看頭了,。這里首先用兔子的圖片替換頁面中原有的圖片（再看看圖 1）,，如圖 2 所示。
圖 2. 同樣的禮帽,，這一次有了兔子
完成這個 DOM 小戲法的第一步是找到網(wǎng)頁中表示 img 元素的 DOM 節(jié)點(diǎn)。一般來說,，最簡單的辦法是用 getElementById() 方法,，它屬于代表 Web 頁面的 document 對象。前面已經(jīng)見到過這個方法,，用法如下：
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,，可以將其保存在一個新的 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)時間。首先看看換圖片比較麻煩的辦法,；后面再重新分析一下看看有沒有更簡單的辦法,。
用帶兔子的新照片替換原有圖片的辦法如下：
- 創(chuàng)建新的
img 元素。
- 訪問當(dāng)前
img 元素的父元素,，也就是它的容器,。
- 在已有
img 元素之前 插入新的 img 元素作為該容器的子級。
- 刪除原來的
img 元素,。
- 結(jié)合起來以便在用戶單擊 Hocus Pocus! 按鈕時調(diào)用剛剛創(chuàng)建的 JavaScript 函數(shù),。
創(chuàng)建新的 img 元素
通過上兩期文章應(yīng)該記住 DOM 中最關(guān)鍵的是 document 對象。它代表整個網(wǎng)頁,，提供了 getElementById() 這樣功能強(qiáng)大的方法,，還能夠創(chuàng)建新的節(jié)點(diǎn)。現(xiàn)在要用到的就是這最后一種性質(zhì),。
具體而言,，需要創(chuàng)建一個新的 img 元素。要記住,，在 DOM 中一切都是節(jié)點(diǎn),，但是節(jié)點(diǎn)被進(jìn)一步劃分為三種基本類型：
還有其他類型，但是這三種可以滿足 99% 的編程需要,。這里需要一個 img 類型的新元素,。因此需要下列 JavaScript 代碼：
var newImage = document.createElement("img");
|
這行代碼可以創(chuàng)建一個 element 類型的新節(jié)點(diǎn)，元素名為 img,。在 HTML 中基本上就是：
要記住,，DOM 會創(chuàng)建結(jié)構(gòu)良好的 HTML，就是說這個目前為空的元素包括起始和結(jié)束標(biāo)簽,。剩下的就是向該元素增加內(nèi)容或?qū)傩?，然后將其插入到網(wǎng)頁中。
對內(nèi)容來說,，img 是一個空元素,。但是需要增加一個屬性 src，它指定了要加載的圖片,。您也許認(rèn)為要使用 addAttribute() 之類的方法,，但情況并非如此。DOM 規(guī)范的制定者認(rèn)為程序員可能喜歡簡潔（的確如此?。?，因此他們規(guī)定了一個方法同時用于增加新屬性和改變已有的屬性值：setAttribute(),。
如果對已有的屬性調(diào)用 setAttribute()，則把原來的值替換為指定的值,。但是,，如果調(diào)用 setAttribute() 并指定一個不 存在的屬性，DOM 就會使用提供的值增加一個屬性,。一個方法,，兩種用途！因此需要增加下列 JavaScript 代碼：
var newImage = document.createElement("img");
newImage.setAttribute("src", "rabbit-hat.gif");
|
它創(chuàng)建一個圖片元素然后設(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 步,，就會發(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),。每個節(jié)點(diǎn)都有父節(jié)點(diǎn)（樹中更高層次的節(jié)點(diǎn),，該節(jié)點(diǎn)是它的一個子級），可能還有自己的子節(jié)點(diǎn),。對于圖片來說,，它沒有子級 —— 要記住圖片是空元素，但是它肯定有父節(jié)點(diǎn),。甚至不需要知道父節(jié)點(diǎn)是什么,，但是需要訪問它。
為此,，只要使用每個 DOM 節(jié)點(diǎn)都有的 parentNode 屬性即可,，比如：
var imgParent = hatImage.parentNode;
|
確實(shí)非常簡單！可以肯定這個節(jié)點(diǎn)有子節(jié)點(diǎn),，因?yàn)橐呀?jīng)有了一個：原來的圖片,。此外,，完全不需要知道它是一個 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)在原圖片的父元素有了兩個 子元素：新圖片和緊跟在后面的舊圖片。必須指出,，這里包圍 這些圖片的內(nèi)容沒有變,，而且這些內(nèi)容的順序也和插入之前完全相同。僅僅是這個父節(jié)點(diǎn)中增加了一個子節(jié)點(diǎn),，即舊圖片之前的新圖片,。
刪除舊圖片
現(xiàn)在只需要刪除舊圖片，因?yàn)榫W(wǎng)頁中只需要新圖片,。很簡單,，因?yàn)橐呀?jīng)得到了舊圖片元素的父節(jié)點(diǎn)。只要調(diào)用 removeChild() 并把需要刪除的節(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! 按鈕的時候運(yùn)行 showRabbit() 函數(shù),。為此只要向 HTML 中增加一個簡單的 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)的各種方法,，可能會注意到方法 replaceNode(),。該方法可用于把一個節(jié)點(diǎn)替換為另一個節(jié)點(diǎn)。再考慮一下前面的步驟：
- 創(chuàng)建新的
img 元素。
- 訪問當(dāng)前
img 元素的父元素,，也就是它的容器,。
- 在已有
img 元素之前 插入新的 img 元素作為該容器的子元素。
- 刪除原來的
img 元素,。
- 連接起來以便在用戶點(diǎn)擊 Hocus Pocus! 的時候調(diào)用剛剛創(chuàng)建的 JavaScript 函數(shù),。
使用 replaceNode() 可以減少需要的步驟數(shù)?？梢詫⒌?3 步和第 4 步合并在一起：
- 創(chuàng)建新的
img 元素,。
- 訪問當(dāng)前
img 元素的父元素，也就是它的容器,。
- 用創(chuàng)建的新元素替換舊的
img 元素,。
- 連接起來以便在用戶點(diǎn)擊 Hocus Pocus! 的時候調(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ù)，很多時候都會發(fā)現(xiàn)可以將四五個步驟壓縮為兩三個步驟,。
替換圖片,，（真正）簡單的辦法
既然指出了執(zhí)行一項(xiàng)任務(wù)幾乎總是有更簡單的方法，現(xiàn)在就說明用兔子圖片替換帽子圖片的簡單得多 的辦法,。閱讀本文的過程中有沒有想到這種方法,？提示一下：與屬性有關(guān),。
要記住,，圖片元素很大程度上是由其 src 屬性控制的，他引用了某個地方的文件（不論是本地 URI 還是外部 URL）,。到目前為止,，我們一直用新圖片替換圖片節(jié)點(diǎn)，但是直接修改已有圖片的 src 屬性要簡單得多,！這樣就避免了創(chuàng)建新節(jié)點(diǎn),、尋找父節(jié)點(diǎn)和替換舊節(jié)點(diǎn)的所有工作，只要一步就能完成了：
hatImage.setAttribute("src", "rabbit-hat.gif");
|
這樣就夠了,！看看清單 7,，它顯示了這種解決方案，包括整個網(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)：更新屬性的時候網(wǎng)頁馬上就會改變,。只要圖片指向新的文件，瀏覽器就加載該文件,，頁面就更新了,。不需要重新加載,，甚至不需要創(chuàng)建新的圖片元素！結(jié)果仍然和圖 3 相同,，只不過代碼簡單得多了,。
把兔子藏起來
現(xiàn)在網(wǎng)頁看起來很漂亮，但是仍然有點(diǎn)原始,。雖然兔子從帽子中跳出來了,，但是屏幕下方的按鈕仍然顯示 Hocus Pocus! 和調(diào)用 showRabbit()。這就是說如果在兔子出來之后仍然點(diǎn)擊按鈕,，就是在浪費(fèi)處理時間,。更重要的是，它毫無用處,，而沒有用的按鈕不是好東西,。我們來看看能否利用 DOM 再作一些修改，無論兔子在帽子里還是出來都讓這個按鈕派上用場,。
修改按鈕的標(biāo)簽
最簡單的是當(dāng)用戶點(diǎn)擊按鈕之后改變它的標(biāo)簽,。這樣就不會看起來像還有什么魔法，網(wǎng)頁中最糟糕的就是暗示用戶錯誤的東西,。在修改按鈕的標(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!");
}
|
通過這個簡單的 DOM 操作,，兔子跳出來之后按鈕的標(biāo)簽馬上就會改變。現(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)建一個新的 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)在這個示例應(yīng)用程序有一個大問題：雖然按鈕的標(biāo)簽 改變了,，但是單擊按鈕時的動作沒有 變,。幸運(yùn)的是，當(dāng)用戶單擊按鈕時可以使用 DOM 改變事件或者發(fā)生的動作。因此,，如果按鈕上顯示 Get back in that hat!,，點(diǎn)擊的時候需要運(yùn)行 hideRabbit()。相反,，一旦兔子藏了起來,，按鈕又返回來運(yùn)行 showRabbit()。
|
避免使用 addEventHandler()
除了 onclick 屬性外,，還有一個方法可用于添加 onClick 或 onBlur 這樣的事件處理程序,，毫不奇怪這個方法就叫 addEventHandler()。不幸的是,，Microsoft? Internet Explorer? 不支持這個方法,，如果在 JavaScript 中使用它，就會有數(shù)百萬 Internet Explorer 用戶除了錯誤外從網(wǎng)頁中什么也看不到（可能還有抱怨）,。不使用這個方法,，應(yīng)用本文中介紹的辦法也能達(dá)到同樣的效果，而且在 Internet Explorer 上也有效,。
|
|
查看 HTML 就會發(fā)現(xiàn)這里處理的事件是 onClick,。在 JavaScript 中，可以通過按鈕的 onclick 的屬性來引用該事件,。（要注意,，在 HTML 中該屬性通常稱為 onClick，其中 C 大寫,；而在 JavaScript 中則稱為 onclick,，全部小寫。）因此可以改變按鈕觸發(fā)的事件：只要賦給 onclick 屬性一個新的函數(shù),。
但是有點(diǎn)細(xì)微的地方：onclick 屬性需要提供函數(shù)引用——不是函數(shù)的字符串名稱,，而是函數(shù)本身的引用。在 JavaScript 中,，可以按名稱引用函數(shù),，不需要帶括號。因此可以這樣修改點(diǎn)擊按鈕時執(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>
|
這樣就得到了一個完成的、可以使用的 DOM 應(yīng)用程序,。自己試試吧,！
結(jié)束語
現(xiàn)在您應(yīng)該非常熟悉 DOM 了。前面的文章介紹了使用 DOM 所涉及到的基本概念，詳細(xì)地討論了 API,，現(xiàn)在又建立一個簡單的基于 DOM 的應(yīng)用程序,。一定要花點(diǎn)時間仔細(xì)閱讀本文，并自己嘗試一下,。
雖然這是專門討論文檔對象模型的系列文章的最后一期,，但肯定還會看到其他關(guān)于 DOM 的文章。事實(shí)上,，如果在 Ajax 和 JavaScript 世界中不使用 DOM 就很難做多少事,，至少在一定程度上如此。無論要創(chuàng)建復(fù)雜的突出顯示還是移動效果,，或者僅僅處理文本塊或圖片,，DOM 都提供了一種非常簡單易用的訪問 Web 頁面的方式。
如果對如何使用 DOM 仍然感覺沒有把握,，花點(diǎn)時間溫習(xí)一下這三篇文章,；本系列的其他文章在使用 DOM 的時候不再多作解釋，讀者也不希望迷失在這些細(xì)節(jié)之中而忽略關(guān)于其他概念的重要信息,，比如 XML 和 JSON,。為了保證能夠熟練地使用 DOM，自己編寫幾個基于 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í)
- 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 ,。
- “developerWorks 中國網(wǎng)站 Ajax 技術(shù)資源中心：在這里您可以找到更多關(guān)于 Ajax 的知識,，包括 Ajax 基礎(chǔ)入門、使用 Java, PHP 等語言開發(fā) Ajax 應(yīng)用的各種技巧和多種 Ajax 框架的技術(shù)信息,。
- 利用 DOM 進(jìn)行 Web 響應(yīng) 和 Ajax 中的高級請求和響應(yīng)：閱讀本系列中關(guān)于 DOM 編程的第一篇和第二篇文章,，或者看看全部 掌握 Ajax 系列文章。
- “構(gòu)建動態(tài)的 Java 應(yīng)用程序”（Philip McCarthy,，developerWorks,，2005 年 9 月）：從服務(wù)器端、從 Java? 的角度考察 Ajax,。
- “Ajax 的 Java 對象序列化”（Philip McCarthy,，developerWorks，2005 年 10 月）：從 Java 的角度分析了如何通過網(wǎng)絡(luò)發(fā)送對象和與 Ajax 交互,。
- “使用 AJAX 調(diào)用 SOAP Web 服務(wù)”（James Snell,，developerWorks，2005 年 10 月）：認(rèn)真閱讀這篇關(guān)于集成 Ajax 和現(xiàn)有基于 SOAP 的 Web 服務(wù)的高級文章,，它說明了如何使用 Ajax 設(shè)計(jì)模式實(shí)現(xiàn)基于 Web 瀏覽器的 SOAP Web 服務(wù)客戶機(jī),。
- 萬維網(wǎng)聯(lián)盟的 DOM 主頁：請?jiān)L問 DOM 相關(guān)內(nèi)容的起點(diǎn),。
- The DOM Level 3 Core Specification：定義了核心文檔對象模型，從可用的類型和屬性到 DOM 在不同語言中的用法,。
- ECMAScript language bindings for DOM：如果您是一位 JavaScript 程序員,，并希望在代碼中使用 DOM，可能會對 Level 3 Document Object Model Core 定義的這個附錄感興趣,。
- “Ajax: A new approach to Web applications”（Jesse James Garrett,，Adaptive Path，2005 年 2 月）：閱讀有關(guān) Ajax 起源的這篇文章,，它是每一位 Ajax 開發(fā)人員的必讀之物,。
- developerWorks Web architecture 專區(qū)：通過這些文章、教程和論壇等提高您的 Web 構(gòu)建技能,。
- developerWorks 技術(shù)事件和網(wǎng)絡(luò)廣播：隨時關(guān)注這些為技術(shù)開發(fā)人員準(zhǔn)備的軟件研討會,。
獲得產(chǎn)品和技術(shù)
- Head Rush Ajax，Brett McLaughlin（O‘Reilly Media,，2006 年）：將本文所述概念記入您的腦海,，Head First 風(fēng)格。
- Java and XML, Second Edition（Brett McLaughlin,，O‘Reilly Media, Inc.,，2001 年）：看看作者關(guān)于 XHTML 和 XML 轉(zhuǎn)換的討論。
- JavaScript: The Definitive Guide（David Flanagan,，O‘Reilly Media, Inc.,，2001 年）：該書深入討論了 JavaScript 和動態(tài) Web 頁面的使用。下一版將增加關(guān)于 Ajax 的兩章,。
- Head First HTML with CSS & XHTML（Elizabeth 和 Eric Freeman,，O‘Reilly Media, Inc.，2005 年）：進(jìn)一步了解 HTML 和 XHTML 標(biāo)準(zhǔn)化以及如何將 CSS 應(yīng)用于 HTML,。
- IBM 試用軟件：用這些軟件開發(fā)您的下一個項(xiàng)目,，可直接從 developerWorks 下載。
討論
關(guān)于作者
|
|
|
|
Brett McLaughlin 從 Logo 時代就開始使用計(jì)算機(jī)了,。（還記得那個小三角嗎,？）近年來，他已經(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 帶來了獲獎的創(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)威著作之一,。
|
|
