|
簡介
這篇文章簡單介紹了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> function start() {
//獲取body標籤 var mybody = document.getElementsByTagName("body")[0]; // 創建一個<table>元素和一個<tbody>元素 mytable = document.createElement("table"); mytablebody = document.createElement("tbody"); //創建所有的單元格 for(var j = 0; j < 2; j++) { // 創建一個<tr>元素 mycurrent_row = document.createElement("tr"); for(var i = 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> <body onload="start()"> </body> </html> 注意我們創建各元素和文字節點的順序：
創建完< table >,< tbody >,< tr >,< 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時會經常用到它。首先，你從上向下建立元素；然後從下向上把它們添加到父節點。 ...
<table border=5> <tr><td>單元格是第0行，第0列</td><td>單元格是第0行，第1列</td></tr> <tr><td>單元格是第1行，第0列</td><td>單元格是第1行，第1列</td></tr> </table> ... 這是代碼生成的表格元素和它的子元素的DOM對象樹： <html>
<head> <title>實例代碼 - 使用JavaScript和DOM創建HTML表格</title> <script> function start() {
// 獲取一個包含所有body元素的列表（將只有一個） // 然後選擇列表裏的第一個元素 myBody = document.getElementsByTagName("body")[0]; // 獲取body字元素中所有的p元素 myBodyElements = myBody.getElementsByTagName("p"); //獲取p元素列表的第二個元素（索引從0開始） myP = myBodyElements[1]; } </script>
</head> <body onload="start()"> <p>hi</p> <p>hello</p> </body> </html> 在這個例子裏，我們設置myP變量爲表示body裏第二個p元素的DOM對象。 myBody = document.getElementsByTagName("body")[0];
因爲一個有效的html文檔只有一個body元素，這個列表講只有一項。我們通過使用 [0] 選取列表的第一個元素來得到它。 myBodyElements = myBody.getElementsByTagName("p");
3.選取p元素列表的第二項 myP = myBodyElements[1];
myP.style.background = "rgb(255,0,0)";
使用document.createTextNode(”..”)創建文本節點 myTextNode = document.createTextNode("world");
以上代碼創建一個文本數據是“word”的TEXT_NODE類型（文字塊）節點，變量myTextNode指向這個節點對象。你需要設置這個文本節點爲其他節點元素的字節點來插入這個文本到你的html頁面裏。 myP.appendChild(myTextNode);
測試這個例子，注意“hello”和“world”兩個詞是連在一起的：“helloworld”。所以在當你看到html頁面時兩個文本節點 hello和world看起來好像是一個節點，而實際上在這個文檔模型裏有兩個節點。第二個節點是一個新的TEXT_NODE類型節點，並且是第二個p標 籤的第二個字節點。下圖在文檔樹裏顯示了剛創建的文本節點。
|
