<a href="http://files.jb51.net/file_images/article/201409/2014093009570421.gif" target="_blank"></a>
DOM（文檔對象模型，Document Object Model）是W3C組織開發的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文檔對象（Document），并将其中所有的标簽和内容都抽象成對象（節點），利用面向對象的思對XML和HTML的操作。其中 Document 對象是DOM的頂層節點。
XML（擴充标記語言，Extensible Markup Language），主要用于資訊的存儲和傳送，HTML也是一種XML。
<a></a>
DOM核心：針對任何結構化文檔的标準模型。
XML DOM：針對 XML 文檔的标準模型。
HTML DOM：針對 HTML 文檔的标準模型。
XML DOM 是：用于 XML 的标準對象模型，用于 XML 的标準程式設計接口，中立于平台和語言的 W3C 标準。
XML DOM 定義了所有 XML 元素的對象和屬性，以及通路它們的方法（接口）。
換言之：XML DOM 是用于擷取、更改、添加或删除 XML 元素的标準。
HTML DOM 是：HTML 的标準對象模型，HTML 的标準程式設計接口的 W3C 标準。
HTML DOM 定義了所有 HTML 元素的對象和屬性，以及通路它們的方法。
換言之，HTML DOM 是關于如何擷取、修改、添加或删除 HTML 元素的标準。
其中，HTML DOM 是 XML DOM 的擴充，換言之，XML DOM 的方法均可以使用在HTML中，而反過來，HTML DOM 的方法不可以使用在XML中。
對于HTML文檔，DOM将所有的标簽全部抽象成節點，并且節點間有嚴格的等級關系，以此形成一個DOM樹。
如：
其對應的DOM樹：
其中，每一行都是兄弟節點，綠色線條代表父子關系，而紅色線條也是父子關系的一種，但是無法通過父親查找孩子而找到。
由DOM樹可見，節點分為三種：元素節點（标簽），屬性節點和文本節點。
nodeName，nodeValue，nodeType
具體如下：
節點類型/元素
nodeName
nodeValue
nodeType
元素節點
标簽名
不可用
1
屬性節點
屬性名
屬性的值
2
文本節點
#text
文本内容
3
document
#document
9
操作目标節點的對象
添加
删除
修改
查詢
目前節點
document.createElement(name)
node.setAttribute(name,value)
node.replaceNode(newNode)
document.getElementById(id)
document.getElementsByName(name)
document.getElementsByTagName(tagName)
父節點
node.appendChild(newNode)
node.removeChild(cNode)
node.replaceChild(newNode,oldNode)
參見節點關系
綠色部分為HTML DOM方法。
nodeName：傳回節點的名稱，依據其類型。
nodeType：傳回節點的類型。
attributes：傳回元素的屬性。
childNodes：傳回元素的子節點的 NodeList。
firstChild：傳回元素的首個子節點。
lastChild：傳回元素的最後一個子節點。
parentNode：傳回元素的父節點。
nextSibling：傳回元素之後緊跟的節點。
previousSibling：傳回元素之前緊随的節點。
textContent：設定或傳回元素及其後代的文本内容。
innerTest：設定或傳回元素後代的文本内容。
innerHTML：設定或傳回元素後代的内容。[HTML DOM]
hasAttribute(name)：傳回元素是否擁有指定的屬性。
hasAttributes()：傳回元素是否擁有屬性。
hasChildNodes()：傳回元素是否擁有子節點。
createAttribute(node)：建立屬性節點。
createElement(node)：建立元素節點。
createTextNode(node)：建立文本節點。
appendChild(node)：向節點的子節點清單末尾添加新的子節點。
cloneNode(include_all:true,false)：克隆節點。
removeAttribute(name)：删除指定的屬性。
removeChild(node)：删除子節點。
replaceNode(newNode)：替換節點。[僅IE]
replaceChild(newNode, oldNode)：替換子節點。
getElementById(id)：找到具有指定id的子孫元素。[HTML DOM]
getElementsByName(name)：找到具有指定name的子孫元素。[HTML DOM]
getElementsByTagName(name)：找到具有指定标簽名的子孫元素。
getAttribute(name)：傳回屬性的值。
setAttribute()：添加新屬性。
XML DOM屬性
node.innerText;
node.firstChild.nodeValue;
node.lastChild.nodeValue;
node.childNodes[0].nodeValue;
node.textContent;[IE8]
HTML DOM屬性
node.innerHTML;
擷取select下面option的文本内容。
HTML：
方法1：擷取select對象，擷取childNodes，注意暗部。
方法2：直接擷取option對象集合
擷取select對象，并通過該對象的特有方法options直接擷取option的對象集合，避免了暗部的影響。
效果：
當然，也可以全部用innerHTML來實作[IE10+]：
JavaScript[HTML DOM方法]：
CSS樣式對象均在HTML DOM節點的style屬性中設定，具體可以檢視相關文檔。
轉載至：http://blog.csdn.net/jacobvv/article/details/42845517
本文轉自 風雨蕭條 部落格，原文連結： http://blog.51cto.com/1095221645/1867380 如需轉載請自行聯系原作者
<a href="http://blog.51cto.com/search/result?q=DOM" target="_blank">DOM</a>