DOM = Document Object Model，是 html 的節點樹。
利用 DOM ，JavaScript 可以修改、刪除 html 裡面的內容、class等等。

DOM 裡面的每個元素、空白都是一個節點，而節點還分類為以下：
Document：也就是文件本身，是 html 最上面一層
Element：元素：例如 html, head, div, img, p.....
Text：元素裡面包住的文字，即使是空白也算
Attribute：元素屬性，例如 id, class, type, onclick....

要修改 DOM 的話，就像找樹枝一樣一層一層的找上去，找到想找的那層以後，再去修改那個節點的資料或屬性。
使用一些 DOM 的方法 (Methods) 可以幫助快速找到節點。

document.getElementById()：找節點 ID

document.getElementById("id");

document.getElementsByTagName()[]：找元素節點，
[] 是當元素有一個以上且又需要鎖定其中一個時，要填入數字幫助找到元素，數字從 0 開始。

document.getElementsByTagName("img");

document.getElementsByClassName()：找 class

document.getElementsByClassName("class");

document.createElement：新增節點

document.createElement("p");

document.createTextNode：在文字字串加文字節點

document.createTextNode("I am text!");

document.removeChild：移除節點

document.appendChild：加入新節點

document.replaceChild()：覆蓋節點

nodeType：節點的形態。
節點形態是指 html 中的元素的形態，分類如同上面提到的Document 、 Element 、 Text 、 Attribute 。
但回傳的節點形態是數字簡稱而不是全名。
例： id 是 1, attributes 是 2...

nodeValue：存在節點裡面的值跟屬性。
例如 div 底下除了文字還有 p 以及 span ， p 跟 span 裡面也都有文字內容，
這時候 nodeValue 可以抓取 div 底下 “所有” 的文字內容，但是 p 跟 span 都不是他的管區～

childNodes：節點下所有子節點陣列。
上述 nodeValue 管不到的 p 跟 span，就交給 childNodes 處理～

firstChild：節點下第一個節點
div --
|-- p 這裡是第一個節點
|-- span
|-- a

lastChild：節點下最後一個節點
div --
|-- p
|-- span
|-- a 這裡是最後一個節點

（firstChild 跟 lastChild 看起來真是和藹可親....因為 CSS 也有 XD）

今日練習

本文同步發表於 http://azzurro.blog.aznc.cc/learn_javascript_14/