Javascript & HTML DOM 簡介
Day2 – Javascript & HTML DOM 操控簡介

Javascript 可以透過設計好的方法自由地去操控 HTML DOM，這可是JS的精華之一阿!!
藉由改變HTML標籤的樣式，就能做出各種常見的網頁動畫效果。

何謂HTML DOM (Document Object Model):
『文件物件模型（Document Object Model，DOM）是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述（representation），讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。 』
資料來源:
http://moztw.org/docs/gecko/aboutdom/
Wiki的解釋：
http://en.wikipedia.org/wiki/Document_Object_Model

在Javascript裡經常使用id, name, class等來取得HTML DOM物件：

• 使用id來取得物件 – document.getElementById()
• 使用name取得物件 – document.getElementsByName()
• 使用class 取得物件 – document.getElementsByClassName()
• 使用tag name 取得物件 – document.getElementsByTagName()
  P.S.1 注意Element和Elements!!
  P.S.2 使用 ClassName 和 TagName 時取得的是一個集合!!

在取得HTML DOM物件之後，便能使用該物件的方法去改變 HTML的屬性與內容：

// 改變HTML
document.getElementById(“test”).innerHTML = “XXX”

// 取得值
document.getElementsById(“input_text”).value

// 改變CSS屬性
element.style.(Javascript 定義的 CSS 屬性)
// example
element.style.backgroundColor = “red”;
element.style.width = “100px”;

P.S. 在Javascript裡用的CSS屬性和CSS定義的屬性名稱略有不同，如CSS裡的background-color，在JS裡是element.style.backgroundColor，不確定相對應的屬性時就google一下吧。

今日練習 - 簡易CSS操控：
https://mega.co.nz/#!oEhjmJRI!bIumfFbX0ZQYmoTNdLlxazIm-UokGW5Mfeor1CEczWo