DOM眼中的HTML文檔：樹
在DOM眼中，HTML跟Xml一樣是一種樹形結構的文檔，< html>是根（root）節點，< head>、< title>、< body>是< html>的子（children）節點，互相之間是兄弟（sibling）節點；< body>下面才是子節點< table>、< span>、< p>等等。如： dom_tree.gif
這個是不是跟Xml的結構有點相似呢。不同的是，HTML文檔的樹形主要包含表示元素、標記的節點和表示文本串的節點。
注: 在 FireFox 瀏覽器中, 您可以通過菜單"工具"->"DOM查看器"來瀏覽文檔的DOM結構; IE 瀏覽器中您需要下載微軟的 Inte.Net Explorer Developer Toolbar 來查看 DOM, 在Java-cn.org/Edit.jsp?page=BrowserDevTool">BrowserDevTool下載此工具.
HTML文檔的節點
DOM下，HTML文檔各個節點被視為各種類型的Node對象。每個Node對象都有自己的屬性和方法，利用這些屬性和方法可以遍曆整個文檔樹。由於HTML文檔的複雜性，DOM定義了nodeType來表示節點的類型。這裡列出Node常用的幾種節點類型：
介面 nodeType常量 nodeType值 備忘
Element Node.ELEMENT_NODE 1 元素節點
Text Node.TEXT_NODE 3 文本節點
Document Node.DOCUMENT_NODE 9 document
Comment Node.COMMENT_NODE 8 注釋的文本
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片斷
Attr Node.ATTRIBUTE_NODE 2 節點屬性
DOM樹的根節點是個Document對象，該對象的documentElement屬性參考資料表示文檔根項目的Element對象（對於HTML文檔，這個就是<html>標記）。Javascript操作HTML文檔的時候，document即指向整個文檔，< body>、< table>等節點類型即為Element。Comment類型的節點則是指文檔的注釋。具體節點類型的含義，請參考《Javascript權威指南》，在此不贅述。
Document定義的方法大多數是生產型方法，主要用於建立可以插入文檔中的各種類型的節點。常用的Document方法有：
方法 描述
createAttribute() 用指定的名字建立新的Attr節點。
createComment() 用指定的字串建立新的Comment節點。
createElement() 用指定的標記名建立新的Element節點。
createTextNode() 用指定的文本建立新的TextNode節點。
getElementById() 返迴文檔中具有指定id屬性的Element節點。
getElementsByTagName() 返迴文檔中具有指定標記名的所有Element節點。
對於Element節點，可以通過調用getAttribute()、setAttribute()、removeAttribute()方法來查詢、設定或者刪除一個Element節點的性質，比如< table>標記的border屬性。下面列出Element常用的屬性：
屬性 描述 tagName 元素的標記名稱，比如< p>元素為P。HTML文檔返回的tabName均為大寫。
Element常用的方法：
方法 描述
getAttribute() 以字串形式返回指定屬性的值。
getAttributeNode() 以Attr節點的形式返回指定屬性的值。
getElementsByTabName() 返回一個Node數組，包含具有指定標記名的所有Element節點的子孫節點，其順序為在文檔中出現的順序。
hasAttribute() 如果該元素具有指定名字的屬性，則返回true。
removeAttribute() 從元素中刪除指定的屬性。
removeAttributeNode() 從元素的屬性列表中刪除指定的Attr節點。
setAttribute() 把指定的屬性設定為指定的字串值，如果該屬性不存在則添加一個新屬性。
setAttributeNode() 把指定的Attr節點添加到該元素的屬性列表中。
Attr對象代表文件項目的屬性，有name、value等屬性，可以通過Node介面的attributes屬性或者調用Element介面的 getAttributeNode()方法來擷取。不過，在大多數情況下，使用Element元素屬性的最簡單方法是getAttribute()和 setAttribute()兩個方法，而不是Attr對象。
使用DOM操作HTML文檔
Node對象定義了一系列屬性和方法，來方便遍曆整個文檔。用parentNode屬性和childNodes數組可以在文檔樹中上下移動；通過遍曆childNodes數組或者使用firstChild和nextSibling屬性進行迴圈操作，也可以使用lastChild和previousSibling進行逆向迴圈操作，也可以枚舉指定節點的子節點。而調用appendChild()、insertBefore()、removeChild()、 replaceChild()方法可以改變一個節點的子節點從而改變文檔樹。
需要指出的是，childNodes的值實際上是一個NodeList對象。因此，可以通過遍曆childNodes數組的每個元素，來枚舉一個給定節點的所有子節點；通過遞迴，可以枚舉樹中的所有節點。下表列出了Node對象的一些常用屬性和方法：
Node對象常用屬性：
屬性 描述
attributes 如果該節點是一個Element，則以NamedNodeMap形式返回該元素的屬性。
childNodes 以Node的形式存放當前節點的子節點。如果沒有子節點，則返回空數組。
firstChild 以Node的形式返回當前節點的第一個子節點。如果沒有子節點，則為null。
lastChild 以Node的形式返回當前節點的最後一個子節點。如果沒有子節點，則為null。
nextSibling 以Node的形式返回當前節點的兄弟下一個節點。如果沒有這樣的節點，則返回null。
nodeName 節點的名字，Element節點則代表Element的標記名稱。
nodeType 代表節點的類型。
parentNode 以Node的形式返回當前節點的父節點。如果沒有父節點，則為null。
previousSibling 以Node的形式返回緊挨當前節點、位於它之前的兄弟節點。如果沒有這樣的節點，則返回null。
Node對象常用方法：
方法 描述
appendChild() 通過把一個節點增加到當前節點的childNodes組，給文檔樹增加節點。
cloneNode() 複製當前節點，或者複製當前節點以及它的所有子孫節點。
hasChildNodes() 如果當前節點擁有子節點，則將返回true。
insertBefore() 給文檔樹插入一個節點，位置在當前節點的指定子節點之前。如果該節點已經存在，則刪除之再插入到它的位置。
removeChild() 從文檔樹中刪除並返回指定的子節點。
replaceChild() 從文檔樹中刪除並返回指定的子節點，用另一個節點替換它。
接下來，讓我們使用上述的DOM應用編程介面，來試著操作HTML文檔。
首先舉一個最簡單的例子, 用 DOM 動態產生一個 Loading 的 IMG 並加入頁面中, 當頁面完全載入後, 就移除這個 IMG 對象.
<script>// create a loading img and add to pagevar loadingImg = document.createElement("IMG");loadingImg.src = "images/loading_xp.gif";document.body.appendChild(loadingImg);// After page loaded, we remove the loading imagedocument.body.onload = function() {document.body.removeChild(loadingImg);};</script>
AJAX_Follow_Me3_Xml_and_DOM-<a class=tigFont onclick=" displaytip(="" java="" )="">JavaScript_E8_A7_A3_E6_9E_90_E5_92_8C_E7_94_9F_E6_88_90Xml">JavaScript 解析和產生 Xml
用 JS 解析和產生 Xml 一般都是使用 DOMDocument 這個對象, 下面簡單的列出其屬性和方法:
屬性:
Attributes 儲存節點的屬性列表 (唯讀)
childNodes 儲存節點的子節點列表 (唯讀)
dataType 返回此節點的資料類型
Definition 以DTD或Xml模式給出的節點的定義 (唯讀)
Doctype 指定文件類型節點 (唯讀)
documentElement 返迴文檔的根項目 (可讀寫)
firstChild 返回當前節點的第一個子節點 (唯讀)
Implementation 返回XmlDOMImplementation對象
lastChild 返回當前節點最後一個子節點 (唯讀)
nextSibling 返回當前節點的下一個兄弟節點(唯讀)
nodeName 返回節點的名字 (唯讀)
nodeType 返回節點的類型 (唯讀)
nodeTypedValue 儲存節點值 (可讀寫)
nodeValue 返回節點的文本 (可讀寫)
ownerDocument 返回包含此節點的根文檔 (唯讀)
parentNode 返回父節點 (唯讀)
Parsed 返回此節點及其子節點是否已經被解析 (唯讀)
Prefix 返回名稱空間首碼 (唯讀)
preserveWhiteSpace 指定是否保留空白 (可讀寫)
previousSibling 返回此節點的前一個兄弟節點 (唯讀)
Text 返回此節點及其後代的常值內容 (可讀寫)
url 返回最近載入的Xml文檔的URL (唯讀)
Xml 返回節點及其後代的Xml表示 (唯讀)
方法:
appendChild 為當前節點添加一個新的子節點,放在最後的子節點後
cloneNode 返回當前節點的拷貝
createAttribute 建立新的屬性
createCDATASection 建立包括給定資料的CDATA段
createComment 建立一個注釋節點
createDocumentFragment 建立DocumentFragment對象
createElement 建立一個元素節點
createEntityReference 建立EntityReference對象
createNode 建立給定類型,名字和命名空間的節點
createPorcessingInstruction 建立操作指令節點
createTextNode 建立包括給定資料的文本節點
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回當前節點是否有子節點
insertBefore 在指定節點前插入子節點
Load 匯入指定位置的Xml文檔
loadXml 匯入指定字串的Xml文檔
removeChild 從子結點列表中刪除指定的子節點
replaceChild 從子節點列表中替換指定的子節點
Save 把Xml檔案存到指定節點
selectNodes 對節點進行指定的匹配,並返回匹配節點列表
selectSingleNode 對節點進行指定的匹配,並返回第一個匹配節點
transformNode 使用指定的樣式表對節點及其後代進行轉換
transformNodeToObject 使用指定的樣式表將節點及其後代轉換為對象
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
