流覽文檔物件模型
流覽器通過DOM允許JavaScript接入。
DOM可以被認為是一個包含各種連接結（node）的樹，HTML文檔中的每一個標籤都由一個節點來表示，這些結都叫做element node。還有幾種其他類型的節點，其中最有用的就是文檔節點（document node），文本節點（text node）, 屬性節點（attribute node）。文檔節點表示文檔本身，而且是DOM這顆樹的根，文本節點表示兩個標籤之間包含的文字，屬性節點表示某個部分開放標籤的屬性。考慮如下的HTML頁面結構：
這一頁的DOM可見圖5.1。
每一頁都有一個文檔節點，但是它的派生物都是從文檔本身的內容衍生的。通過element node、tet node以及attribute node的應用，網頁上的所有資訊可以通過JavaScript接入。
DOM並不限於HTML和JavaScript。下麵是W3C DOM網站的解釋：
文檔物件模型（DOM）是一個平臺——是一個與語言沒有關係的介面規範，它允許程式和腳本動態接入並且更新內容、結構和文檔的類型。
所以，雖然通過DOM將JavaScript與HTML接入是最常用的操作，但是通過本章的內容，你可以將DOM應用于很多種程式語言的文檔類型。
為了讓你成為“DOMain的掌握者”，在這一章中，我們將講解如何在一個網頁中找到你想要找到的element，然後改變它，重新安排它或者完全的去掉它。
Accessing Elements（接入元素）
接入後就允許控制，控制就是權利，你就是一個有權利的程式師，對麼？所以，你需要接入一個網頁中的所有內容。不幸的是，JavaScript僅僅通過幾種方法和特性來讓你接入一個網頁中的所有元素。
解決方法
雖然可以像流覽地圖一樣流覽HTML文檔，但是這是發現一個元素的一個效率很低的方法，因為這種方法要求大量的編碼，文檔結構的任何變化通常都會要求你重寫腳本。如果你想快速並且簡單的找到什麼內容，你的方法就是document.getElementById。
假設你能在正確的地方做上合適的標記，getElementById可以通過它的id屬性值來讓你快速接入任何元素。比如，假設你的網頁包含如下的編碼：
你可以使用a元素的id屬性來直接介入這個元素本身：
變數elementRef的值不會指向a元素——任何你對elementRef的操作都會影響那個超連結。
對於某個特定的元素來說，getElementById是好的，但是有的時候，你想要處理一組元素，為了基於它們的標籤名稱（tag name）找到這組元素，你可以使用getElementsByTagName。
正如它的名稱，getElementsByTagName，它可以通過tag name返回所有的元素。假設我們有這樣一段HTML編碼：
我們可以收集所有的超連結，如下：
現在，anchors這個變數的值就是a元素的集合（collection）。集合有點像array，集合的每一條都用中括弧括起來，而且數字從0開始。getElementsByTagName返回的元素根據它們的源順序排序，如下：
通過這種結合，你可以重複這些元素並且對它們進行操作，比如根據元素的節點className屬性來對它們進行分類：
與getElementById不同，getElementByTagName對於每一個單獨的元素節點都有效。你可以通過讓getElementByTagName現在在某類特定的元素上來縮小範圍。getElementByTagName就會只返回相應分類的元素。
如果我們有兩個列表，但是只想給其中的一個列表創建一個新的分類，我們可以通過getElementByTagName在他們的父列表（parent list）上定位那些a元素：
為了定位stars的列表，我們需要獲得parent ul element，之後就可以讓getElementsByTagName直接執行：
StarsAnchors變數的值是stars無序列表中a元素的集合，而不是整個網頁中所有a元素的集合。
DOM 0 Collections
HTML文檔中很多特殊的元素甚至可以通過更加直接的方式接入。一個文檔的body element可以通過document.body接入，document.forms中可以找到所有一個文檔中所有的表格。一個文檔中所有的圖片都可以在document.images中找到。
事實上，在DOM按照W3C標準化之前這些就已經有了，一般稱為DOM 0 properties。
因為這些特徵的執行並不是標準化的，所以有的時候在流覽器中這些集合可能會不可靠，早期版本的流覽器，比如Mozilla流覽器（即Firefox）就不支持XHTML文檔的這些集合。
如今的流覽器對這些功能的支持都做的非常的好，但是如果你確實遇到了困難，你可以試著用getElementsByTagName的方法來接入相關的元素。而不是用document.body。比如，你可以使用：
討論
如果你確實需要通過元素（element）來接入DOM hierarchy element，每個節點都有幾個屬性可以讓你接入相關的節點：
node.childNodes：每個特定節點的子節點按照源順序的集合，包括元素和文本節點;
node.firstchild：某個特定節點的第一級子節點;
node.lastchild：某個特定節點的最後一級子節點;
node.parentnode：某個特定節點的父元素;
node.nextsibling：文檔中與某個特定節點具有同一個父節點的下一個節點;
node.nextsibling：文檔中與某個特定節點具有同一個父節點的前一個節點;
如果某個節點不存在上述的其中一個特性（比如，一個父節點的最後一個節點可能沒有下一個同父節點），其返回的值就是null。
看下面的例子：
ID star2的列表可以使用下面任何一種表達：
空白節點（whitespace nodes）
有些流覽器會產生一些whitespace nodes，whitespace nodes是僅包含空白（標號/tabs，空格/spaces，新的一行/newlines）的文本節點，目的就是幫助編碼確定格式。
當你通過上述的方法來逐一節點來對DOM進行分析的時候，你需要保留這些whitespace nodes。通常，這就意味著你分析的這個元素節點不僅僅是一個空白節點。
有兩種方法查看一個節點是否是一個元素節點（element node）或者是一個文本節點（text node）。文本節點的Nodename永遠都是“#text”，元素節點的nodename是元素類型的。在區分文本節點和元素節點的時候，更容易檢查nodeType屬性。元素節點的nodeType是1，而文本節點的nodeType是3。在分析的時候，你可以通過這點來進行分析：
使用這些DOM屬性，你可以再root html元素就開始你的分析，最後深入到fieldset的legend——這些都僅僅是節點的事情。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
