HTML DOM 定義了訪問和操作HTML文檔的標準方法。
HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。
DOM 被分爲不同的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：
- Core DOM
- 定義了一套標準的針對任何結構化文檔的對象
- XML DOM
- 定義了一套標準的針對 XML 文檔的對象
- HTML DOM
- 定義了一套標準的針對 HTML 文檔的對象。
getElementById() 和 getElementsByTagName()
getElementById() 和 getElementsByTagName() 這兩種方法，可查找整個 HTML 文檔中的任何 HTML 元素。
這兩種方法會忽略文檔的結構。假如您希望查找文檔中所有的 <p> 元素，getElementsByTagName() 會把它們全部找到，不管 <p> 元素處於文檔中的哪個層次。同時，getElementById() 方法也會返回正確的元素，不論它被隱藏在文檔結構中的什麼位置。
這兩種方法會向您提供任何你所需要的 HTML 元素，不論它們在文檔中所處的位置！
getElementById() 可通過指定的 ID 來返回元素：
getElementById() 語法
document.getElementById("ID");
註釋：getElementById() 無法工作在 XML 中。在 XML 文檔中，您必須通過擁有類型 id 的屬性來進行搜索，而此類型必須在 XML DTD 中進行聲明。
getElementsByTagName() 方法會使用指定的標籤名返回所有的元素（作爲一個節點列表），這些元素是您在使用此方法時所處的元素的後代。
getElementsByTagName() 可被用於任何的 HTML 元素：
getElementsByTagName() 語法
document.getElementsByTagName("標籤名稱");
或者：
document.getElementById('ID').getElementsByTagName("標籤名稱");
實例 1
下面這個例子會返回文檔中所有 <p> 元素的一個節點列表：
document.getElementsByTagName("p");
實例 2
下面這個例子會返回所有 <p> 元素的一個節點列表，且這些 <p> 元素必須是 id 爲 "maindiv" 的元素的後代：
document.getElementById('maindiv').getElementsByTagName("p");
節點列表（nodeList）
當我們使用節點列表時，通常要把此列表保存在一個變量中，就像這樣：
var x=document.getElementsByTagName("p");
現在，變量 x 包含着頁面中所有 <p> 元素的一個列表，並且我們可以通過它們的索引號來訪問這些 <p> 元素。
註釋：索引號從 0 開始。
您可以通過使用 length 屬性來循環遍歷節點列表：
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
// do something with each paragraph
}
您也可以通過索引號來訪問某個具體的元素。
要訪問第三個 <p> 元素，您可以這麼寫：
var y=x[2];
parentNode、firstChild以及lastChild
這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行“短距離的旅行”。
請看下面這個 HTML 片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代碼中，第一個 <td> 是 <tr> 元素的首個子元素（firstChild），而最後一個 <td> 是 <tr>元素的最後一個子元素（lastChild）。
此外，<tr> 是每個 <td>元 素的父節點（parentNode）。
對 firstChild 最普遍的用法是訪問某個元素的文本：
var x=[a paragraph]; var text=x.firstChild.nodeValue;
parentNode 屬性常被用來改變文檔的結構。假設您希望從文檔中刪除帶有 id 爲 "maindiv" 的節點：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先，您需要找到帶有指定 id 的節點，然後移至其父節點並執行 removeChild() 方法。
根節點
有兩種特殊的文檔屬性可用來訪問根節點：
- document.documentElement
- document.body
第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。
第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標籤的直接訪問。
創建和增加節點
createElement(tagName) 按照給定的標籤名稱創建一個新的元素節點
appendChild(nodeName) 向已存在節點列表的末尾添加新的子節點
insertBefore(newNode,oldNode) 向指定的節點之前插入一個新的子節點
cloneNode(deep) 複製某個指定的節點
實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
function newNode(){
var oldNode=document.getElementById("sixty1"); //訪問插入節點的位置
var image=document.createElement("img"); //創建一個圖片節點
image.setAttribute("src","images/79043_12541923138NPD.png"); //設置圖片路徑
document.body.insertBefore(image,oldNode); //插入圖片到sixty1前面
}
function copyNode(){
var image=document.getElementById("sixty1"); //訪問複製的節點
var copyImage=image.cloneNode(false); //複製指定的節點
document.body.appendChild(copyImage); //在頁面最後增加節點
}
</script>
</head>
<body>
<input id="b1" type="button" value="增加一幅圖片" οnclick="newNode()" />
<input id="b2" type="button" value="複製圖片" οnclick="copyNode()" />
<img src="images/79043_12541923132KUt.png" id="sixty1" alt="白" />
<img src="images/79043_12541923138NPD.png" id="sixty2" alt="黑" />
</body>
</html>
刪除和替換節點
removeChild(node) 刪除指定的節點
replaceChild(newNode,oldNode) 用其他的節點替換指定的節點
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
function delNode(){
var dNode=document.getElementById("w"); //訪問被刪除的節點
document.body.removeChild(dNode);
}
function repNode(){
var oldimage=document.getElementById("b"); //訪問被替換的節點
var newimage=document.createElement("img");//創建一個圖片節點
newimage.setAttribute("src","images/w.png"); //設置圖片路徑
document.body.replaceChild(newimage,oldimage); //替換原來的圖片
}
</script>
</head>
<body>
<input id="b1" type="button" value="刪除圖片" οnclick="delNode()" />
<input id="b1" type="button" value="替換圖片" οnclick="repNode()" /><br />
<img src="images/w.png" id="w" alt="白" />
<img src="images/b.png" id="b" altt="黑" />
</body>
</html>Table 對象集合
| 集合 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| cells[] | 返回包含表格中所有單元格的一個數組。 | 5 | 1 | 1 | No |
| rows[] | 返回包含表格中所有行的一個數組。 | 4 | 1 | 9 | Yes |
| tBodies[] | 返回包含表格中所有 tbody 的一個數組。 | 4 | Yes |
Table 對象屬性
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| align | 表在文檔中的水平對齊方式。（已廢棄） | - | - | - | - |
| bgColor | 表的背景顏色。（已廢棄） | - | - | - | - |
| border | 設置或返回表格邊框的寬度。 | 4 | 1 | 9 | Yes |
| caption | 對錶格的 <caption> 元素的引用。 | 4 | 1 | 9 | Yes |
| cellPadding | 設置或返回單元格內容和單元格邊框之間的空白量。 | 4 | 1 | 9 | Yes |
| cellSpacing | 設置或返回在表格中的單元格之間的空白量。 | 4 | 1 | 9 | Yes |
| frame | 設置或返回表格的外部邊框。 | 4 | 1 | 9 | Yes |
| id | 設置或返回表格的 id。 | 4 | 1 | 9 | Yes |
| rules | 設置或返回表格的內部邊框（行線）。 | 4 | 1 | 9 | Yes |
| summary | 設置或返回對錶格的描述（概述）。 | 6 | 1 | 9 | Yes |
| tFoot | 返回表格的 TFoot 對象。如果不存在該元素，則爲 null。 | 4 | 1 | 9 | Yes |
| tHead | 返回表格的 THead 對象。如果不存在該元素，則爲 null。 | 4 | 1 | 9 | Yes |
| width | 設置或返回表格的寬度。 | 4 | 1 | 9 | Yes |
標準屬性
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| className | 設置或返回元素的 class 屬性。 | 5 | 1 | 9 | Yes |
| dir | 設置或返回文本的方向。 | 5 | 1 | 9 | Yes |
| lang | 設置或返回元素的語言代碼。 | 5 | 1 | 9 | Yes |
| title | 設置或返回元素的 title 屬性。 | 5 | 1 | 9 | Yes |
Table 對象方法
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| createCaption() | 爲表格創建一個 caption 元素。 | 4 | 1 | 9 | Yes |
| createTFoot() | 在表格中創建一個空的 tFoot 元素。 | 4 | 1 | 9 | Yes |
| createTHead() | 在表格中創建一個空的 tHead 元素。 | 4 | 1 | 9 | Yes |
| deleteCaption() | 從表格刪除 caption 元素以及其內容。 | 4 | 1 | 9 | Yes |
| deleteRow() | 從表格刪除一行。 | 4 | 1 | 9 | Yes |
| deleteTFoot() | 從表格刪除 tFoot 元素及其內容。 | 4 | 1 | 9 | Yes |
| deleteTHead() | 從表格刪除 tHead 元素及其內容。 | 4 | 1 | 9 | Yes |
| insertRow() | 在表格中插入一個新行。 | 4 | 1 | 9 | Yes |
TableRow 對象
TableRow 對象代表一個 HTML 表格行。
在 HTML 文檔中 <tr> 標籤每出現一次，一個 TableRow 對象就會被創建。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 標準.
TableRow 對象集合
| 集合 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| cells[] | 返回包含行中所有單元格的一個數組。 | 4 | 1 | 9 | Yes |
TableRow 對象屬性
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| align | 設置或返回在行中數據的水平排列。 | 4 | 1 | 9 | Yes |
| ch | 設置或返回在行中單元格的對齊字符。 | Yes | |||
| chOff | 設置或返回在行中單元格的對齊字符的偏移量。 | Yes | |||
| id | 設置或返回行的 id。 | 4 | 1 | 9 | Yes |
| innerHTML | 設置或返回行的開始標籤和結束標籤之間的 HTML。 | 5 | 1 | 9 | No |
| rowIndex | 返回該行在表中的位置。 | 4 | 1 | 9 | Yes |
| sectionRowIndex | 返回在 tBody 、tHead 或 tFoot 中，行的位置。 | Yes | |||
| vAlign | 設置或返回在行中的數據的垂直排列方式。 | 4 | 1 | 9 | Yes |
TableRow 對象方法
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| deleteCell() | 刪除行中的指定的單元格。 | 4 | 1 | 9 | Yes |
| insertCell() | 在一行中的指定位置插入一個空的 <td> 元素。 | 4 | 1 | 9 | Yes |
TableCell 對象
TableCell 對象代表一個 HTML 表格單元格。
在一個 HTML 文檔中 <td> 標籤每出現一次，一個 TableCell 對象就會被創建。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 標準.
TableCell 對象屬性
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| abbr | 設置或返回單元格中內容的縮寫版本。 | 6 | 1 | 9 | Yes |
| align | 設置或返回單元格內部數據的水平排列方式。 | 4 | 1 | 9 | Yes |
| axis | 設置或返回相關單元格的一個逗號分隔的列表。 | 6 | 1 | 9 | Yes |
| cellIndex | 返回單元格在某行的單元格集合中的位置。 | 4 | 1 | 9 | Yes |
| ch | 設置或返回單元格的對齊字符。 | Yes | |||
| chOff | 設置或返回單元格的對齊字符的偏移量。 | Yes | |||
| colSpan | 單元格橫跨的列數。 | 4 | 1 | 9 | Yes |
| headers | 設置或返回 header-cell 的 id 值。 | Yes | |||
| id | 設置或返回單元格的 id。 | 4 | 1 | 9 | Yes |
| innerHTML | 設置或返回單元格的開始標籤和結束標籤之間的 HTML。 | 4 | 1 | 9 | No |
| rowSpan | 設置或返回單元格可橫跨的行數。 | 4 | 1 | 9 | Yes |
| scope | 設置或返回此單元格是否可提供標籤信息。 | Yes | |||
| vAlign | 設置或返回表格單元格內數據的垂直排列方式。 | 4 | 1 | 9 | Yes |
| width | 設置或返回單元格的寬度。 | 4 | 1 | 9 | Yes |