HTML DOM 快速導覽 - 基本概念

DOM 物件模型把一個個 HTML 元素 (element) 都變成了物件 (object) ，因此可以透過 JavaScript 程式設定、存取元素屬性 (attribute) 與內容。基本上，整份文件屬於一個 document 物件。



舉例如下
function run() {
    var s = document.getElementById("content");
    s.innerHTML = document + "<br / >" + 
                  Node + "<br / >" + 
                  Element + "<br / >" + 
                  Event + "<br / >" + 
                  window + "<br / >" + 
                  screen + "<br / >" + 
                  navigator + "<br / >" + 
                  history + "<br / >" + 
                  location + "<br / >" + 
                  console + "<br / >" +
                  document.getElementById("content");    
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：demo.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


這裡定義了一個 run() 函數 (function) ，只做了兩件事情，首先建立變數 (variable) s ，由 document 物件的 getElementById() 方法 (method) 取得 id 屬性為 content 的元素，將該元素所屬的物件指派給變數 s
var s = document.getElementById("content");


s 屬於 Element 物件，藉由 Element 物件的 innerHTML 屬性將 id 屬性為 content 的元素內容設定成指派運算子 (assignment operator) 右邊的字串 (string)
s.innerHTML = document + "<br / >" + 
              Node + "<br / >" + 
              Element + "<br / >" + 
              Event + "<br / >" + 
              window + "<br / >" + 
              screen + "<br / >" + 
              navigator + "<br / >" + 
              history + "<br / >" + 
              location + "<br / >" + 
              console + "<br / >" +
              document.getElementById("content");


此例中我們用了很多 DOM 保留的物件名稱，有 document 、 Node 、 Element 、 Event 、 window 、 screen 、 navigator 、 history 、 location 、 console 等，這些實際上都是物件名稱，每一種物件都有各自專屬的屬性與方法。


Element 為 Firefox 瀏覽器慣用的 HTML 元素物件名稱，其他瀏覽器可能使用 element 而非 Element ，但是實際寫 Element 的機會很少，因為 Element 是作為物件原型的父類別。


開頭為小寫的物件變數，如 document 、 window 、 screen 、 navigator 、 history 、 location 、 console 等，這是習慣用名，各瀏覽器都適用，並無差別。


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="demo.js"></script>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：demo.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟，按下 RUN 按鈕便會啟動 run() 函數，結果如下



此例直接顯示各種物件變數在 Firefox 中顯示相關訊息，基本上在各瀏覽器的執行結果是大同小異的。


中英文術語對照
元素element
物件object
屬性attribute
函數function
變數variable
方法method
指派運算子assignment operator
字串string
瀏覽器broswer


您可以繼續參考
基本概念
文件物件 document


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html
https://developer.mozilla.org/en/DOM/About_the_Document_Object_Model
https://developer.mozilla.org/en/The_DOM_and_JavaScript
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)