JavaScript 入門指南 - 認識 HTML DOM
JavaScript 除了資料型態的物件 (object) 有 Boolean 、 Number 、 Sring 外，內建物件還有 Array 、 Math 、 Date 、 RegExp
除了內建的物件外，瀏覽器 (broswer) 另外會建置文建物件模型，也就是 HTML DOM ，這可讓我們可以把 HTML 的元素都當成物件來操作。 HTML DOM 主要有以下這幾個
- document
- element
- event
- window
我們之前用 document 的 write() 將字串 (string) 寫到瀏覽器中，當然， document 不只是可以做這些事情，幾乎所有跟 HTML 文件有關的都可以用 document ，例如下面的 HTML 文件，我們在 <script> 標籤中設計一個 run() 函數
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <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> |
我們仔細來看看 run() 的定義
5
6
7
8
9
| 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 屬性重新設定文字顏色與字型尺寸。
我們可以看到真正的工作是由元素物件來做的，此例透過 document 取得元素物件，當然我們也可以直接以元素物件當參數 (parameter) 傳遞給 run() ，例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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> |
使用 HTML DOM 可以讓網頁有動態效果，無論是新增或刪除 HTML 元素都可由 HTML DOM 來達成，這也是學習 JavaScript 重要的一部份，在我們接下來的部份也有很多地方會用到。
Reference : http://pydoing.blogspot.tw/2012/12/JavaScript-Understanding-HTML-DOM.html
沒有留言:
張貼留言