一次翻譯技術文章，本身英語水平很爛，翻譯的也是自己剛開始學習的技術，所以能勉強看懂英文的話都要盡量讀 原文 而不要看我的翻譯，免得被誤導。閱讀原文
簡介
這篇文章簡單介紹了DOM 1.0一些基本而強大的方法以及如何在JavaScript中使用它們。你可以學到如何動態地建立、擷取、控制和刪除HTML元素。這些DOM方法同樣適用於XML。所有全面支援DOM 1.0的瀏覽器都能很好地運行本篇的執行個體，比如IE5，Firefox等。
概況 － Sample1.html
這篇文章通過執行個體代碼介紹DOM。請從嘗試下面的HTML例子開始。它使用DOM 1的方法由JavaScript動態建立一個HTML表格。它建立一個由四個包含常值內容的儲存格組成的小表格。儲存格的文字內容是：“儲存格是第y行第 x列”，表示儲存格在表格中的行數和列數。 <html>
<head>
<title>執行個體代碼 - 使用JavaScript和DOM建立HTML表格</title>
<script>functionstart(){
//擷取body標籤
varmybody = document.getElementsByTagName("body")[0];//
建立一個<table>元素和一個<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody"); //建立所有的儲存格
for(varj = 0; j < 2; j++){
//
建立一個<tr>元素
mycurrent_row =
document.createElement("tr");
for(vari = 0; i < 2; i++){
// 建立一個<td>元素
mycurrent_cell =
document.createElement("td");
//建立一個文本節點
currenttext =
document.createTextNode("儲存格是第"+j+"行，第"+i+"列");
// 將建立的文本節點添加到<td>裡
mycurrent_cell.appendChild(currenttext);
//
將列<td>添加到行<tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// 將行<tr>添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
//
將<tbody>添加到<table>
mytable.appendChild(mytablebody);
//將<table>添加到<body>
mybody.appendChild(mytable);
// 將表格mytable的border屬性設定為2
mytable.setAttribute("border", "2");
}</script>
</head>
<bodyonload="start()">
</body>
</html> 注意我們建立各元素和文位元組點的順序：
1.建立< table >元素
2.建立< table >的子項目< tbody >
3.使用一個迴圈來建立< tbody >的子項目< tr >
4.分別使用迴圈為每一個< tr >建立子項目< tb >
5.為每一個< tb >建立文本節點
建立完< table >,< tbody >,< tr >,< td >元素和文本節點，我們使用相反的順序把它們分別添加到自己的父節點。
1.將建立的文本節點添加到< td >裡 mycurrent_cell.appendChild(currenttext);2.將列< td >添加到行< tr > mycurrent_row.appendChild(mycurrent_cell);3.將行< tr >添加到< tbody > mytablebody.appendChild(mycurrent_row);4.將< tbody >添加到< table > mytable.appendChild(mytablebody);5.將< table >添加到< body > mybody.appendChild(mytable);記住這個方法。當你使用W3C DOM時會經常用到它。首先，你從上向下建立元素；然後從下向上把它們添加到父節點。
這是JavaScript代碼產生的HTML： ...
<tableborder=5>
<tr><td>儲存格是第0行，第0列</td><td>儲存格是第0行，第1列</td></tr>
<tr><td>儲存格是第1行，第0列</td><td>儲存格是第1行，第1列</td></tr>
</table>
...這是代碼產生的表格元素和它的子項目的DOM對象樹：
你只需使用少量的DOM方法就可以構造這樣一個表格和他的子項目。記住要時刻謹記你將建立的構造的模型樹；這樣會使編寫代碼更加簡單。在圖中的< table >樹裡，< table >有一個子項目< tbody >。< tbody >有兩個子項目。< tbody >的每個子項目（< tr >）都有兩個子項目< td >。最後，每個< td >有一個子項目：一個文本節點。
基本的DOM方法 － Sample2.html
getElementByTagName方法適用於文檔和元素，所以文檔根對象和所有的元素對象一樣有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 來擷取某個元素所有子項目的列表，使用標籤名選擇它們。
element.getElementsByTagName 返回一個有特定標籤名的子項目的列表。你可以通過調用一個item方法（傳遞一個index參數給它）來從這個子項目列表中擷取一個元素。請注意列表第一個子項目的index為0。下一個主題繼續前面的Table例子。下面這個執行個體更加簡單，顯示了一些基本的方法： <html>
<head>
<title>執行個體代碼 - 使用JavaScript和DOM建立HTML表格</title>
<script>functionstart(){
// 擷取一個包含所有body元素的列表（將只有一個）
//
然後挑選清單裡的第一個元素
myBody = document.getElementsByTagName("body")[0];// 擷取body字元素中所有的p元素
myBodyElements =
myBody.getElementsByTagName("p"); //擷取p元素列表的第二個元素（索引從0開始）
myP = myBodyElements[1];
}</script>
</head>
<bodyonload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html> 在這個例子裡，我們設定myP變數為表示body裡第二個p元素的DOM對象。
1.擷取一個包含所有body元素的列表 myBody = document.getElementsByTagName("body")[0];因為一個有效html文檔只有一個body元素，這個列表講只有一項。我們通過使用 [0] 選取列表的第一個元素來得到它。
2.擷取blog子項目裡所有的p元素 myBodyElements = myBody.getElementsByTagName("p");3.選取p元素列表的第二項 myP = myBodyElements[1];
一旦獲得一個html元素的DOM對象，你就可以設定它的屬性。比如，你想設定style background color屬性，只需要添加：
myP.style.background = "rgb(255,0,0)";使用document.createTextNode(”..”)建立文本節點
使用文檔對象調用createTextNode方法建立你的文本節點。你只需要輸入常值內容。傳回值是一個表示這個文本節點的對象。 myTextNode = document.createTextNode("world");以上代碼建立一個文本資料是“word”的TEXT_NODE類型（文字塊）節點，變數myTextNode指向這個節點對象。你需要設定這個文本節點為其他節點元素的位元組點來插入這個文本到你的html頁面裡。
使用appendChild(..)插入元素
所以，通過調用myP.appendChild([node_element])，你設定這個文本節點為第二個p元素的位元組點。 myP.appendChild(myTextNode);測試這個例子，注意“hello”和“world”兩個詞是連在一起的：“helloworld”。所以在當你看到html頁面時兩個文本節點 hello和world看起來好像是一個節點，而實際上在這個文檔模型裡有兩個節點。第二個節點是一個新的TEXT_NODE類型節點，並且是第二個p標籤的第二個位元組點。在文檔樹裡顯示了剛建立的文本節點。
createTextNode和appendChild是在hello和world之間添加空格的一種簡單的方法。需要特別注意的是 appendChild方法將添加在最後一個子節點後面，就像world被添加到hello後面。所以如果你想在hello和world之間添加一個文本節點需要使用insertBefore方法而不是appendChild。
|
