html basic

DOM - Document Object Model 的縮寫，代表網頁的內容 (文件) 是一種 物件模型。

簡單的說，就是網頁文件中所有的標籤 (元素)，都是物件，例如 <a>、<img>、<div>、<b> ... 等都是物件，

元素之間的關係 (如子元素) 可以用樹狀結構來呈現，如下圖所示。

透過網頁的物件模型，我們就可以使用 JavaScript 去選取特定的物件，改變他的屬性，

甚至動態的新增、刪除物件，這就是網頁程式設計的關鍵，

包括 Google 地圖等很炫的應用，都是這樣做出來的喔。

學習重點

• 1.

  物件的屬性

  每個物件 (元素) 依照特性，可以有自己的屬性，

  例如 <table> 就會有屬性 border，在 html5，屬性的只有 " " 和 1，" " 代表此表格僅用於排版。

  
  

  除了個別的屬性外，所有的物件都會有一些共通的屬性，

  例如 id, style 等，其中 id 就像元素的身分證，如果有設定，就必須是唯一的。
• 2.

  事件

  我們用以下例子說明會更直接

  <button onclick="alert('click a button')">

  當滑鼠點擊 button 元素時，會觸發 onclick 事件，

  如果 button 物件有註冊這個事件，例如利用屬性 onclick，就會執行對應的 JavaScript 程式。

  
  

  除了滑鼠的 onclick 事件外，還有 mouseover、mousemove 等相當多的事件，詳細的資訊請參考:

  http://www.w3schools.com/jsref/dom_obj_event.asp

  http://en.wikipedia.org/wiki/DOM_events

  
  

  註冊事件的方式除了用屬性之外，

  比較好的做法是透過 JavaScript 的 addEventListener() 對某個元素 (物件) 註冊特定的事件，

  因為這部分牽涉許多瀏覽器與 JavaScript 的細節，我們以後再做說明。
• 3.

  善用 chrome 開發工具

  觀察 DOM 元素與結構最好的方法就是善用開發工具，甚麼都清清楚楚的!