在不重新整理頁面的情況下使用 DOM 改變網頁介面
簡介：本系列的上一篇文章中考察了文件物件模型（DOM）編程中涉及到的概念——網頁瀏覽器如何把 網頁看作一棵樹，現在您應該理解了 DOM 中使用的編程結構。本期教程將把這些知識用於實踐，建立一 個簡單的包含一些特殊效果的 Web 頁面，所有這些都使用 JavaScript 操縱 DOM 來建立，不需要重新加 載或者重新整理頁面。
前面兩期文章已經詳細介紹了文件物件模型或者 DOM，讀者應該很清楚 DOM 是如何工作的了。（前兩 期 DOM 文章以及 Ajax 系列更早文章的連結請參閱參考資料。）本教程中將把這些知識用於實踐。我們 將開發一個簡單的 Web 應用程式，其使用者介面可根據使用者動作改變，當然要使用 DOM 來處理介面的改變 。閱讀完本文之後，就已經把學習到的關於 DOM 的技術和概念付諸應用了。
假設讀者已經閱讀過上兩期文章，如果還沒有的話，請先看一看，切實掌握什麼是 DOM 以及 Web 瀏 覽器如何將提供給它的 HTML 和 CSS 轉化成單個表示網頁的樹狀結構。到目前為止我一直在討論的所有 DOM 原理都將在本教程中用於建立一個能工作的（雖然有點簡單）基於 DOM 的動態 Web 頁面。如果遇到 不懂的地方，可以隨時停下來複習一下前面的兩期文章然後再回來。
從一個應用程式範例開始
我們首先建立一個非常簡單的應用程式，然後再添加一點 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 代碼。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
