2013年6月1日 星期六

html basic

DOM - Document Object Model 的縮寫,代表網頁的內容 (文件) 是一種 物件模型
簡單的說,就是網頁文件中所有的標籤 (元素)都是物件,如 <a>、<img>、<div>、<b> ... 等都是物件,
元素之間的關係 (如子元素) 可以用樹狀結構來呈現,如下圖所示
透過網頁的物件模型,我們就可以使用 JavaScript 去選取特定的物件,改變他的屬性,
甚至動態的新增、刪除物件,這就是網頁程式設計的關鍵,
包括 Google 地圖等很炫的應用,都是這樣做出來的喔。
0d1eb450808af377b1670b9568ba6fcc.png
學習重點

  • 1.
    物件的屬性
    每個物件 (元素) 依照特性,可以有自己的屬性,
    例如 <table> 就會有屬性 border,在 html5,屬性的只有 " " 和 1," " 代表此表格僅用於排版。

    除了個別的屬性外,所有的物件都會有一些共通的屬性,
    例如 id, style 等,其中 id 就像元素的身分證,如果有設定,就必須是唯一的。
  • 2.
    事件
    我們用以下例子說明會更直接
    <button onclick="alert('click a button')">
    當滑鼠點擊 button 元素時,會觸發 onclick 事件,
    如果 button 物件有註冊這個事件,例如利用屬性 onclick,就會執行對應的 JavaScript 程式。

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

    註冊事件的方式除了用屬性之外,
    比較好的做法是透過 JavaScript 的 addEventListener() 對某個元素 (物件) 註冊特定的事件,
    因為這部分牽涉許多瀏覽器與 JavaScript 的細節,我們以後再做說明。
  • 3.
    善用 chrome 開發工具
    觀察 DOM 元素與結構最好的方法就是善用開發工具,甚麼都清清楚楚的!

沒有留言:

張貼留言