文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述（representation），讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。
[全球資訊網協會]（World Wide Web Consortium，W3C）建立了 [DOM] 的標準，稱之為「W3C DOM」。在當今主要瀏覽器都已正確實作的情況下，W3C DOM 使強大、跨瀏覽器的應用程式成真。
現在舉個 HTML檔案 實例來說明 DOM（Document Object Model，DOM）文件物件模型，這樣比較能瞭解。
W3CDOM.html
<html>
<head>
<script type='text/javascript'>
function showTd(){
var nodes = document.getElementsByTagName("td");
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
alert(node.childNodes[0].nodeValue);
}
}
function showTitle(){
document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}
</script>
</head>
<body>
<input value="showTitle" onclick="showTitle();" type="button"><br>
<input value="showTDValues" onclick="showTd();" type="button"><br>
<div id="myTitle"></div>
<table>
<tbody>
<tr>
<td>EmpID</td>
<td>UserID</td>
<td>UserName</td>
</tr>
<tr>
<td>E0001</td>
<td>Polin</td>
<td>我</td>
</tr>
</tbody>
</table>
</body>
</html>
DOM 對 W3CDOM.html 檔案視為一個標籤文件，每個標籤視作一個節點，這些節點從<html>
標籤開始作為根標籤，上面的 W3CDOM.html 可以用下圖來表示(下圖中標示出相對於橘色tr節點的屬性):
PS:可以使用hasChildNodes()來測試目前的DOM節點物件是否有子節點。
在JavaScript中可以使用document物件取得HTML文件中節點的值，如標籤上的id屬性id="myTitle"，可以使用getElementById()並指定id名稱來取得節點的DOM物件，例如：
function showTitle(){
document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}
您也可以操作getElementsByTagName()並指定標籤名稱來取得節點，例如可使用以下的程式片段，顯示上例的表格文字內容：
function showTd(){
var nodes = document.getElementsByTagName("td");
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
alert(node.childNodes[0].nodeValue);
}
}
您可以使用DOM節點的innerHTML屬性來設定節點中的HTML內容，不過innerHTML並不是W3C DOM規範中的標準屬性，只是目前剛好大部份的瀏覽器都有支援，標準的作法是要懂得各種DOM上建立、設定節點的方法，可以深入瞭解這 innerHTML屬性。
請問，這張圖的childNodes 是不是標錯地方了?
回覆刪除以黃色的tr來說，childNodes 是再下層的那3個?
還是沒錯，本來就這樣?
抱歉我完全初學者
應該是沒錯哦
回覆刪除