Web網頁的一般能夠通過document以及document所相關的各種元素組成。當然我們也能夠通過層次結構的樹形結構在展現Web頁面。假設要對一個網頁進行改動的話，我們能夠通過document對象。Node對象以及Element對象進行相關的操作。
【Document對象】是全部頁面元素的全部者或是父節點，絕大多數用來創建新元素實例的工廠方法都是核心document對象的方法。
DOM1——定義了DOM的基礎設施，包含模式和API
DOM2——增強了對CSS的支持，改進了對document元素的訪問方法
DOM3——除了對之前版本號的擴展和改進之外，該版本號還增強了支持Web服務的模塊，增強了對XML的支持。
這里主要講述DOM HTML API：
DOM HTML API具有非常好的自描寫敘述性。它有專門的對象名稱。旨在引入擴瀏覽器存在的很多BOM實現，方便往后兼容。HTML API不僅從主要的HTMl元素中繼承了屬 性和方法，還會從核心的Node對象中繼承。
絕大多數的HTML對象也是從HTMLElement中繼承的。基於同意的元素屬性{id,title,lang,dir,className}；每一個HTML對象的名 字都是從HTML正式元素的名稱中獲取的。比如：HTMLFormElement是HTML中表單元素的接口對象，通過該對象能夠訪問該元素中全部的有效元素。
API對象沒有構造函數，不能獨立於其它對象單獨創建。要創建這些接口對象，須要使用一個工廠方法。這個工廠負責生產所需的對象。比如：為了在某個表格的最后 加入一行，我們須要通過工廠方法insertRow來加入一個表格行。var row=table.insertRow(-1)<!--當中table是一個表格對象>；為了為這個新建的表格行加入兩個單元格， 能夠使用工廠方法insertCell。var cell1=row.insertCell(0);vavr cell2=row.insertCell(1);同一時候能夠通過removeCell和removeRow方法來刪除表格單元格和表格行。
有些DOM HTML接口並不直接表示特定的HTML元素，而是表示對象的集合。對象的集合能夠通過其父元素訪問，如document或form元素，它是用HTMLCollection接 口表示的。HTMLCollection接口僅僅有一個名為length的屬性以及兩個方法(一)item。參數位數字型的索引值(二)nameItem。參數是字符串。比如。使用DOM訪問圖像。使 用item方法var img=document.images.item(0);使用namedItem方法var img=document.images.namedItem("original");
【Node對象】在W3C關於DOM規范中。將文檔描寫敘述成一個節點的集合。而且以層次結構的樹形結構相連接。
能夠使用不同的技術訪問網頁內容樹的節點(一)查詢特定類型的全部標簽(二)遍歷整個樹以探索每一個層級上的每一個節點。DOM樹種元素之間存在：父子節點。兄弟節點的關系。
這里主要理解DOM Core API：
對於文檔樹中的每一個節點。都擁有DOM的Node對象中定義的全部基本屬性集和基本方法集。
Node對象的屬性記錄着與DOM樹內容相關的信息。包含兄弟節點元素。 子節點元素，父節點元素。
有一些屬性用來記錄節點的相關信息。包含類型，名字以及值。
Node對象的屬性主要包含：nodeName nodeValue nodeType parentNode childNodes firstChild lastChild等。
節點nodeType屬性是數字型的。能夠使用DOM規定的一組常量來替代數字訪問每種類型的節點。
比如：ELEMENT_NODE值為1；ATTRIBUTE_NODE值為2； TEXT_NODE值為3；COMMENT_NODE值為8等等。
可是IE對這樣的長亮不支持。這時候能夠對Node對象進行擴展或穿件全局的自己定義對象。把這些值保存到一個數組的 屬性中。
document對象是與web頁面文檔之間的核心接口。我們能夠使document.getElementById();document.getElementsByTagName();document.getElementsByClass();
來創建新對象。
【Element對象】Element屬性並不總是能夠通過對象屬性訪問的。假設想要使用這種Element屬性時，而它不是作為對象類提供的屬性。那么我們就能夠使用Element方法。我們能夠使用這個方案獲取，設置和檢查屬性值是否存在：getAttribute(name) setAttribute(name,value) removeAttribute(name); getAttributeNode(name)
setAttributeNode(name,value) removeAttributeNode(name); hasAttribute(name)
實際上document對象能夠或多或少的處理上下文中的全部東西，只是有時候你可能須要處理嵌套在其它元素中的元素，這時候可能就須要Node和Element對象。
比如：有兩個包括段落元素的div塊：第一個div塊包括兩個段落，第二個塊包括一個段落。
<div id="div1">
<p>one</p>
<p>two</p>
</div>
<div id="div2">
<p>three</p>
</div>
怎樣才干僅僅獲得第一個div塊中的段落元素呢？
var div=document.getElementById("div1");
var ps=div.getElementByTagName("p"); //當中的ps就是第一個div塊中的兩個段落ps[0]和ps[1]
【改動文檔樹】
web網頁能夠以層次結構的樹形結構呈現，那我們能夠通過改動文檔樹來達到我們所須要的網頁。當中document對象的方法來創建新元素實例的工廠方法；Node對象提供了層次樹形結構的文檔樹支持；Element元素提供了一種訪問其上下文內元素的方法。以對嵌套在該元素內的元素進行改動。
document對象的工廠方法：createElement(tagname)——創建特定類型的元素
createDocumentFragment——DocumentFragment是個輕量級的document對象。用於獲取文檔樹中一部分。假設想在DOM樹中加入大 量的節點，先使用createDocumentFrgment方法創建一個documentFragment。接着為其加入節點，然后將documentFragment加入到文檔樹中。
createTextNode(data)——保存頁面中的文本
當創建了一個新節點之后。能夠使用Node方法將其加入到現有文檔樹中:
insertBefore(newChild,refChild)——在refChild指定的現有節點前插入新節點
replaceChild(newChild,oldChild)——替換現有節點
removeChild(oldChild)——刪除現有子節點
appendChild(newChild)——為文檔加入新的子節點
注意：必須在正確的上下文中調用這些方法。
也就是要在包括要替換或刪除的節點的元素上運行以上操作。