6. 認識 Dom

HTML 是標記語言。 Javascript 是程式碼。

瀏覽器載入 HTML "時"，會將它編譯成 DOM (Document Object Model)，就是你當前看到的畫面的結構。

取得 DOM

js 可以對 DOM

• 取得、變更元素 "內容"
• 取得、增加、修改、刪除元素 "屬性"。

瀏覽器用 Js 操作 DOM

• getElementbyId 原理 document 是 Dom 物件，getElementbyId 是它的一個方法， 他會尋找 DOM 元素、取得參址器，回傳一個 "元素物件" 的位置。 若沒有該 id、找不到物件，會回傳 null。 它應該要能回傳一個物件，但是沒有東西可回傳（於是用一個代表 "不存在" 的值，即 null）

`getElementById` 是 DOM 物件的一個方法
`innerHTML` 是 element 物件的一個屬性
`outerHTML` 是 element 物件的一個屬性

• event handler (事件處理器) e.g.

    var init(){
        //...
    }
    window.onload = init
    // window 是瀏覽器物件
    // onload 是瀏覽器的一個屬性：當 window "下載完成" 的 event (活動、事件) 發生時執行一個函式。
    // 整句翻譯為：當瀏覽器發生 "下載完成事件" 後，執行 init 函式。
    // init 在此就是一個 callback、回呼函式、event handler (事件處理器)。
  

事件 (Event) 除了有 window 事件、使用者與頁面互動事件、還可以自己寫 js 事件。 處理 DOM 要在 DOM 全部載入完成後。

操作元素屬性

先用 DOM 物件方法 getElementById 在記憶體某處 "建立" 了元素物件、取得元素參址器。 只後用元素物件的方法 setAttribute 找到屬性值。

setAttribute('屬性名稱', '屬性值') 設定、取得 element 屬性， 屬性不存在都會得到 null； getElementById 找無 id 也會得到 null。