| 一次翻譯技術文章，本身英語水平很爛，翻譯的也是自己剛開始學習的技術，所以能勉強看懂英文的話都要盡量讀 原文 而不要看我的翻譯，免得被誤導。閱讀原文
簡介
這篇文章簡單介紹了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 >有一個子元素：一個文本節點?！ ?br />基本的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。 | 
