本文節選自《JavaScript DOM 編程藝術》（人民郵電出版社）第三章。部分內容有刪改。早上起來中國隊又奪得三枚金牌，中國隊棒棒噠~ 然後我用盡了洪荒之力纔將書中的一段給搬上來，碼字不易，且看且珍惜哈~
四個非常使用的 DOM 方法：getElementById、getElementByTagName、getAttribute和setAttribute。
一、文檔：DOM中的“D”
DOM是“Document Object Model”（文檔對象模型）的首字母縮寫。如果沒有document（文檔），DOM也就無從談起。當創建了一個網頁並把它加載到Web瀏覽器中時，DOM就在幕後悄然而生。它將根據你編寫的網頁文檔創建一個文檔對象。
在人類語言中，“對象”這個詞的含義往往不那麼明確和具體，它幾乎可以用來稱呼任何一種客觀存在的事物。但在程序設計語言中，“對象”這個詞的含義非常明確和具體。
二、對象：DOM中的“O”
“對象”是一個獨立的數據集合。與某個特定對象相關聯的變量被稱爲這個對象的屬性。可以通過某個特定對象去調用的函數被稱爲這個對象的方法。
JavaScript語言裏的對象可以分爲三種類型：
① 用戶定義對象(user-defined object): 由程序員自行創建的對象。
② 內建對象(native object): 內建在JavaScript 語言裏的對象，如Array、Math、和Date等。
③ 宿主對象(host object): 由瀏覽器提供的對象。
window對象對應着瀏覽器窗口本身，這個對象的屬性和方法通常被統稱爲BOM(瀏覽器對象模型)——但我覺得稱之爲Window Object Model(窗口對象模型)更爲貼切。BOM向程序員提供了window.open和window.blur等方法，你們在上網衝浪時看到的各種彈窗窗口和下拉菜單——其數量之多已經到了氾濫成災的地步——幾乎都是由這種方法負責創建和處理的。難怪JavaScript會有一個不好的名聲！
值得慶幸的是，在這本書裏我們不需要與BOM打太多的交道。我們將把注意力集中在瀏覽器窗口的內部而不是瀏覽器窗口本身。我們將着重探討如何對網頁的內容進行處理，而用來實現這一目標的載體就是document對象。
現在，我們已經對DOM中的字母“B”(document，文檔)和字母“O”(object，對象)做了解釋，那麼字母“M”又代表着什麼呢？
三、模型：DOM中的“M”
DOM中的“M”代表着“Model”(模型)，但說它代表着“Map”(地圖)也未嘗不可。模型也好，地圖也罷，它們的含義都是某種事物的表現形式。就像一個模型火車代表着一輛真正的火車、一張城市街道圖代表着一個實際存在的城市那樣，DOM代表着被加載到瀏覽器窗口裏的當前網頁：瀏覽器向我們提供了當前網頁的地圖（或者說是模型），而我們通過JavaScript去讀取這張地圖。
既然是地圖，就必須有諸如方向、等高線和比例尺之類的記號。要想看懂和使用地圖，就必須知道這些記號的含義和用途——這個道理同樣適用於DOM。要想從DOM獲得信息，我們必須先把各種用來表示和描述一份文檔的記號弄明白。
DOM把一份文檔表示爲一棵樹（這裏所說的“樹”是數學意義上的概念），這是我們理解和運用這一模型的關鍵。更具體地說，DOM把文檔表示爲一棵家譜樹。
家譜樹本身又是一種模型。家譜樹的典型用法是表示一個人類家族的譜系並使用parent（父）、child（子）、sibling（兄弟）等記號來表示家族成員之間的關係。家譜樹可以把相當複雜的關係簡明地表示出來：一位特定的家族成員既是某些成員的父輩，又是另一些成員的子輩，同時還是另一些成員的兄弟。
類似於人類家族譜系的情況，家譜樹模型也非常適合用來表示一份用（X）HTML語言編寫出來的文檔。
請看下面這項非常基本的網頁，它的內容是一份購物清單。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>Shopping list</title> </head> <body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff.</p> <ul id="purchases"> <li>A tin of beans</li> <li>Cheese</li> <li>Milk</li> </ul> </body> </html>
這份文檔可以用圖3-1中的模型來表示。
我們來分析一下這個網頁的結構。這種分析不僅可以讓我們瞭解它是由哪些元素構成的，還可以讓我們瞭解爲什麼圖3-1中的模型可以如此完美地把它表示出來。在對Doctype做出聲明後，這份文檔首先打開了一個<html>標籤，而這個網頁裏的所有其它元素都包含在這個元素裏。因爲所有其它的元素都包含在其內部，所以這個<html>標籤既沒有父輩，也沒有兄弟。如果這是一個一棵真正的樹的話，這個<html>標籤顯然就是樹根。
這正是圖3-1中的家譜樹以html爲根元素的原因。毫無疑問，html元素可以代表整個文檔。
如果在這份文檔裏更深入一層，我們將發現<head>和<body>兩個分支。它們存在於同一層次且互不包含，所以它們是兄弟關係。它們有着共同的父元素<html>，但又各有各的子元素，所以它們本身又是其他元素的父元素。
<head>元素有兩個子元素：<meta>和<title>（這兩個元素是兄弟元素）。<body>元素有三個子元素：<h1>、<p>和<ul>（這三個元素是兄弟關係）。如果繼續深入下去，我們將發現<ul>也是一個父元素。它有三個子元素，它們都是<li>元素。
利用這種簡單的家譜關係記號，我們可以把各元素之間的關係簡明清晰地表達出來。
例如，<h1>和<ul>之間是什麼關係？答案是它們是兄弟關係。
那麼<body>和<ul>之間又是什麼關係？<body>是<ul>的父元素，<ul>是<body>的一個子元素。
如果把這種文檔元素想像成一棵家譜樹上的各個節點的話，我們就可以用同樣的記號來描述DOM。不過，與使用“家譜樹”這個術語相比，把一份文檔稱爲一棵“節點樹”更準確。