javascript DOM和DOM操作的四種基本方法
在瞭解了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指令碼的基石。