利用DOM進行web響應
1、 DOM簡介
document object model
2、 文檔對象
瀏覽器將web頁面轉換成對象表示，例如下面一段HTML代碼。
<html>
<head>
<title>Trickier nesting, still</title>
</head>
<body>
<div id="main-body">
<div id="contents">
<table>
<tr><th>Steps</th><th>Process</th></tr>
<tr><td>1</td><td>Figure out the <em>root element</em>.</td></tr>
<tr><td>2</td><td>Deal with the <span id="code">head</span> first,
as it's usually easy.</td></tr>
<tr><td>3</td><td>Work through the <span id="code">body</span>.
Just <em>take your time</em>.</td></tr>
</table>
</div>
<div id="closing">
This link is <em>not</em> active, but if it were, the answers
to this <a href="answers.html"><img src="exercise.gif" /></a> would
be there. But <em>do the exercise anyway!</em>
</div>
</div>
</body>
</html>
從HTML元素開始，把HTML元素當做根元素，head和body元素是html根元素的孩子，tilte是head的孩子，整個樹這樣組織下去，這段代碼的DOM樹形式展示如下圖所示。
圖片來源於原作者
3、通過DOM建立web應用
下面通過一個更換圖片的例子展示一下web應用中如何通過DOM獲取、更改和刪除頁面中的元素的。
3.1 網頁顯示圖片
<form >
<img src="topHat.gif" id="hat"/><br/>
<input id="button1" type="button" value="showRabbit!" onClick="showRabbit();" />
</form>
這段代碼是在頁面上顯示一個圖片和一個button按鈕。沒有使用submit而是使用button的理由是，我們不需要連接服務器請求資源，而是通過dom更換圖片的資源。
3.2 更換圖片
想要更換顯示的圖片，有多種方法，以下方法由複雜到簡單（假設使用圖片B更換已經顯示的圖片A）：
- 添加元素
- 新建一個img元素
- 設置img元素的屬性，src爲圖片B
- 獲得圖片A的img元素
- 獲得圖片A的img元素的父元素（容器）
- 將新img元素放入容器中
- 刪除圖片A的img元素
對應的代碼如下：
function showRabbit(){
var oldImg= document.getElementById("hat");
var newImg=document.createElement("img");
newImg.setAttribute("src", "rabbit-hat.gif");
var imgParents=oldImg.parentNode;
imgParents.insertBefore(newImg, oldImg);
imgParents.removeChild(oldImg);
}
- 更換元素
- 新建一個img元素
- 設置img元素的屬性，src爲圖片B
- 獲得圖片A的img元素
- 獲得圖片A的img元素的父元素（容器）
- 更換父元素中的img元素
對應的代碼如下：
function showRabbit(){
var oldImg= document.getElementById("hat");
var newImg=document.createElement("img");
newImg.setAttribute("src", "rabbit-hat.gif");
var imgParents=oldImg.parentNode;
imgParents.insertBefore(newImg, oldImg);
imgParents.removeChild(oldImg);
imgParents.replaceChild(newImg, oldImg);
}
- 更換屬性
- 獲得圖片A的img元素
- 更換img元素的src屬性，將圖片改爲B
對應的代碼如下：
function showRabbit(){
var image=document.getElementById("hat");
image.setAttribute("src", "rabbit-hat.gif");
}
通過input標籤中的onClick屬性來觸發函數。
<input id="button1" type="button" value="showRabbit!" onClick="showRabbit();" />
3.3 反覆更換圖片
- 增加按鈕的id屬性，獲取按鈕元素
- 修改按鈕的標籤
- 修改按鈕的onClick函數
兩個onClick函數如下：
function showRabbit(){
var oldimg= document.getElementById("hat");
var newimg=document.createElement("img");
newimg.setAttribute("src", "rabbit-hat.gif");
var imgParents=oldimg.parentNode;
imgParents.insertBefore(newimg, oldimg);
imgParents.removeChild(oldimg);
var button=document.getElementById("button1");
button.setAttribute("value","hideRabbit!");
button.onClick=hideRabbit;
}
function hideRabbit(){
var image=document.getElementById("hat");
image.setAttribute("src", "topHat.gif");
var button=document.getElementById("button1");
button.setAttribute("value", "showRabbit!");
button.onClick=showRabbit;
}