JavaScript 入門指南 - 認識 HTML DOM

JavaScript 除了資料型態的物件 (object) 有 Boolean 、 Number 、 Sring 外，內建物件還有 Array 、 Math 、 Date 、 RegExp

各種內建物件的詳細介紹請參考

JavaScript 快速導覽 - 內建物件

除了內建的物件外，瀏覽器 (broswer) 另外會建置文建物件模型，也就是 HTML DOM ，這可讓我們可以把 HTML 的元素都當成物件來操作。 HTML DOM 主要有以下這幾個

document

element

event

window

各種 HTML DOM 的詳細介紹請參考

HTML DOM 快速導覽 - 基本概念

我們之前用 document 的 write() 將字串 (string) 寫到瀏覽器中，當然， document 不只是可以做這些事情，幾乎所有跟 HTML 文件有關的都可以用 document ，例如下面的 HTML 文件，我們在 <script> 標籤中設計一個 run() 函數

<html>
<head>
<title>docuemnt Demo</title>
<script>
function run() {
    var d = document.getElementById("display");
    d.style.color = "red";
    d.style.fontSize = "x-large"; 
}
</script>
</head>
<body>
<div id="display" onclick="run()">something happened</div>
</body>
</html>

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

run() 函數準備運用在 id 屬性為 display 的 HTML 元素上，利用 HTML 元素的事件處理屬性 onclick 設定執行 run() ，因此點擊 <div> 的範圍就會執行 run()

<div id="display" onclick="run(this)">something happened</div>

各種 HTML 元素的事件處理屬性的詳細介紹請參考

HTML DOM 快速導覽 - HTML 元素的事件處理屬性

我們仔細來看看 run() 的定義

function run() {
    var d = document.getElementById("display");
    d.style.color = "red";
    d.style.fontSize = "x-large"; 
}

首先， run() 的工作是利用 document 的 getElementById() 方法取得 id 屬性為 display 的 HTML 元素，這會讓變數 d 取得 <div> 的元素物件，也就是上面提到的 element 。接下來便是利用元素物件的 style 屬性重新設定文字顏色與字型尺寸。

各種樣式設定屬性 style 的詳細介紹請參考

HTML DOM 快速導覽 - 樣式設定的物件 style

這例子很簡單，我們先開啟 documentdemo.html 吧

用滑鼠點一下 something happened 的地方，文字顏色與大小就立刻改變了

我們可以看到真正的工作是由元素物件來做的，此例透過 document 取得元素物件，當然我們也可以直接以元素物件當參數 (parameter) 傳遞給 run() ，例如

<html>
<head>
<title>docuemnt Demo</title>
<script>
function run(d) {
    d.style.color = "red";
    d.style.fontSize = "x-large"; 
}
</script>
</head>
<body>
<div id="display" onclick="run(this)">something happened</div>
</body>
</html>

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

這裡在呼叫 run() 時增加 this 當參數，然後 run() 的定義裡增加參數 d ，也刪掉 document 的部份，因為參數 d 就直接是元素物件了。

使用 HTML DOM 可以讓網頁有動態效果，無論是新增或刪除 HTML 元素都可由 HTML DOM 來達成，這也是學習 JavaScript 重要的一部份，在我們接下來的部份也有很多地方會用到。

下面我們來想想怎麼樣製作密碼表，先來看看儲存密碼表的陣列 (array) 吧！

中英文術語對照
物件	object
瀏覽器	broswer
字串	string
參數	parameter
陣列	array

您可以繼續參考

網頁軟體開發

認識 HTML DOM

陣列

洗牌演算法

Encode Software 概觀

資料驗證

自訂 Encrypt 物件

控制函數與整合 Encrypt 物件

完成版的 Encode Software

下一步

相關目錄

回 JavaScript 入門指南
回 JavaScript 教材
回首頁

參考資料

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects
http://www.w3schools.com/JS/js_htmldom.asp
http://www.tutorialspoint.com/javascript/javascript_html_dom.htm

Search This Blog

Nintendo E3