廣告聯播

2008年10月6日 星期一

[DOM] W3C DOM 文件物件模型(Document Object Model,DOM)

From: Polin Wei

文件物件模型(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屬性。

2 則留言:

  1. 請問,這張圖的childNodes 是不是標錯地方了?
    以黃色的tr來說,childNodes 是再下層的那3個?

    還是沒錯,本來就這樣?
    抱歉我完全初學者

    回覆刪除