W3C DOM

DOM 文件物件模型全名為 Document Object Model,由全球資訊網協會 W3C(World Wide Web Consortium)所建立的 DOM 標準就稱為 W3C DOM,建立目的是要讓各家瀏覽器有相同的文件物件模型標準,DOM 提供 HTML 與 XML 的 API,可以讓 Script 與網頁內的內容或元素溝通,例如更改網頁內容或是取得元素的值,DOM 通常用來與 JavaScript 溝通,但並非專屬於 JavaScript 所使用,W3C 所建立的 DOM 是一套獨立的規則,透過一至性的 API 介面,讓各種 Script 與其溝通,優點是促進符合 W3C DOM 標準的網頁,能夠順利在符合 W3C 標準的瀏覽器順利運作,若所有的網頁設計師與瀏覽器廠商都能遵循 W3C DOM 標準,將可以大幅度提升網路瀏覽品值。

原則上我們可以將一個 HTML 文件或 XML 文件都看成一種 DOM,每個文件內的標籤都看成是 DOM 的元素或是節點,我們就可以透過能夠與 W3C DOM 溝通的 Script 來存取或修改這些元素(element)與節點(node),例如 JavaScript 就是個很好用的 Script。

透過 JavaScript 與 DOM 溝通

原則上 JavaScript 與 DOM 的溝通方式可以透過 Document 的方式進行,舉例來說我們可以透過 document.write 將字串寫入網頁中,也可以透過 document.getElementById 取得網頁中特定的 ID 值,其中 document 是文件的意思,Element 是元素,而 ById 則是透過文件中的 Id 來判斷元素,JavaScript 有提供三種方法,讓我們取得一份 DOM 文件中的元素,請看此表。
Script定義
document.getElementById查詢文件中標示的特定 id 值,返回特定值
document.getElementsByName查詢文件中標示的特定 name 值,返回 JavaScript Array 陣列
document.getElementsByTagName查詢文件中標示的特定 name 值,返回 JavaScript Array 陣列

更多透過 Document 與 HTML 物件溝通方式請參閱:JavaScript Document

透過 JavaScript 與 DOM API 溝通範例
<script language="javascript">
function GetValue(){
    alert(document.getElementById("Test").value);
}
</script>
<input type="text" id="Test"><input type="button" value="讀取結果" onclick="GetValue()">
以上範例輸出結果如
我們先透過 JavaScript 的 document.getElementById("Test") 取得 DOM 文件中 Id 為 Test 的欄位,並增加 .value 來取得其值,其中還使用了 JavaScript onclick 事件,用來判斷操作行為,當填寫完成並選擇讀取結果的按鈕,取得 DOM 文件元素值的整個程式就會開始運作,alert 會將取得的元素值顯示在對話視窗,這就是一個簡單的 DOM 文件物件模型的使用方式,目前所有主流的瀏覽器都支援 W3C DOM。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012