在了解了javascript的語言特性后，javascript真正大放光彩的地方來了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model),文檔對象模型。
簡單的說就是一套操作文檔內容的方法。
文檔：DOM的D
如果沒有document(文檔)，DOM就無從談起。當創建了一個網頁並把它加載到web瀏覽器中，DOM就悄然而生，它將根據你編寫的網頁文檔創建一個文檔對象。
對象：DOM的O
javascript中的對象分為三種：用戶自定義對象（用戶自己創建的對象），內建對象（內建在js語言的對象，如Array,Math,Date），宿主對象(由瀏覽器提供的對象，最基礎的就是window對象)
Window對象對應瀏覽器窗口的本身，這個對象的屬性和方法通常稱為BOM（瀏覽器對象模型）。但我們不需要與BOM打太多交道，我們需要將注意力集中到瀏覽器窗口的內部而不是瀏覽器窗口本身。我們將着重探討如何對網頁的內容進行處理，而用來實現這一目標的載體就是document對象。
模型：DOM的M
代表某種事物的表現形式。就像一個火車模型代表一列火車，一張地圖代表一個城市一樣，DOM代表被加載到瀏覽器窗口里的當前網頁。瀏覽器向我們提供了當前網頁的“地圖”，我們可以通過javascript去讀取這張“地圖”。既然是地圖，就必須有諸如方向，比例尺等記號。要想看懂地圖，就必須弄懂這些記號的含義。所以我們必須要把各種用來描述文檔的記號弄明白。
需要注意的是，我們需要把DOM當作一個整體，不能分割看待，即DOM（文檔對象模型）是一套操作文檔內容的方法。
DOM把一份文檔表示為一棵樹（節點樹），是我們理解和運用這一模型的關鍵。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shopping list</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <h1>What to buy</h1> 9 <p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p> 10 <ul id="purchases"> 11 <li>A tin od beans</li> 12 <li>Cheese</li> 13 <li>Milk</li> 14 </ul> 15 </body> 16 </html>
用樹表示這個網頁的結構：
DOM存在着不同類型的節點：
1.元素節點：DOM的原子是元素節點。事實上，文檔的每一個元素都是一個對象。
2.文本節點：元素節點構成文檔的結構，則文本節點構成文本的內容。文本節點總是被包含在元素節點的內部，但並不是所有元素節點都包含文本節點。
3.屬性節點：元素或多或少都具有一些屬性。
(除外，還有一些其它類型的節點，如注釋)
DOM操作的四種基本方法
DOM操作的四種基本方法：getElementById(), getElementsByTagname(), getAttribute(), setAttribute()
1. getElementById()：
參數：元素的ID值。 （元素節點簡稱元素）
返回值：一個有指定ID的元素對象（元素是對象）
注：這個方法是與document對象相關聯，只能由document對象調用。
用法：document.getElementById(Id)
例：
typeof document.getElementById("purchases");//object
2. getElementsByTagName():
參數：元素名
返回值：一個對象數組。這個數組里每個元素都是對象，每個對象分別對應着文檔里給定標簽的一個元素。
注：這個方法可和一般元素關聯。這個方法允許我們把通配符當作它的參數，返回在某份html文檔里總共有多少個元素節點。
用法：element.getElementsByTagName(TagName)
例：
var items=document.getElementsByTagName("li"); items.length;//3 document.getElementsByTagName(“*”);//12
3. getAttribute():
參數：元素的某個屬性名
返回值：這個元素屬性的屬性值
注：getAttribute()不能通過document對象調用，只能通過元素對象去調用它。
用法：object.getAttribute(Attribute)
例：
var para=document.getElementsByTagName("p");//返回的是數組 para[0].setAttribute("title","a list of goods"); para[0].getAttribute("title");//a list of goods
說明：
通過setAttribute（）方法對文檔作出的改變，但這張改變並未反映到源代碼中，也就是說，源代碼中屬性值仍舊是原來的屬性值。這種“表里不一”的現象緣於DOM的工作模式：先加載文檔的靜態內容，再以動態方式對它們進行刷新，動態刷新不改變文檔的靜態內容，而對頁面內容的刷新，不需要用戶在他們的瀏覽器里執行刷新操作就可以實現。
DOM中還有許多其它的屬性和方法，但這四種基本方法是編寫許多DOM腳本的基石。