1.DOM（Document Object Model）被稱作文件物件模型
它是語言和平台中立的介面，允許程式和指令碼動態訪問和更新文檔的內容，結構和風格。
在AJAX中，DOM對於我們來說是HTML 和 XML 文檔的一個應用程式介面，它可以把HTML，XML與AJAX中的開發語言Javascript串連起來。
Javascript中的DOM實現可以使得我們在AJAX中通過Javascript代碼對HTML和XML資料進行DOM方式的操作，從而做到頁面的動態修改更新和資料的提取處理。
2.XML 和 HTML 的DOM
HTML的DOM和XML的DOM在API介面上基本一致，使用差別不大，但本質上有區別。
HTML的DOM是一個記憶體對象樹，在瀏覽器中只儲存一份，HTML的DOM修改HTML的內容會直接反應到瀏覽器中；
而XML的DOM則可以建立多個，每個可以對應一個XML文本。
3.DOM 對象樹
在DOM眼中，HTML是由很多不同類型的節點群組成的，這些節點都屬於NODE對象。
NODE對象有一個nodeType的屬性可用於判斷節點類型
表格：
節點類型：
l元素節點是HTML中最常見的節點，頁面中的<body>,<input>,<div>都是元素節點。
l屬性節點表示的是一個元素節點的某個屬性，例如<input>中的value屬性就可以被看作一個屬性節點。
l文本節點表示HTML頁面中的一段文字資訊，例如<div>Hello World</div>，其中的”Hello World”就是一個文本節點。
l注釋文本節點也比較好理解，HTML的注釋資訊，<!—Comment Message-->比如這樣一段內容就是一個注釋文本節點。
l根節點顧名思義，表示的是HTML的根，在Javascript中有一個特殊的對象document，它可以表示HTML的根節點，
後面我們會介紹這個特殊對象有很多在AJAX中非常常用的方法。
4.DOM的API
根節點的屬性和方法：
Element節點的屬性和方法：
（所有的）Node 對象的屬性：
方法列表：
insertBefore 既可以插入，還可以移動！功能很強！
使用 Apanta Studio 進行開發：
第一個測試代碼：
<html> <head> <script type="text/javascript"> function test(){ var rootNode = document.documentElement;//得到根節點 var div1 = document.getElementById("div1");//根據id得到指定的元素 var tagName = div1.tagName;//得到某個元素的tag名稱 var divNodes = document.getElementsByTagName("div");//根據tagName得到所有的這種元素 var newNode = document.createElement("div");//建立一個新的div元素節點 var textNode = document.createTextNode("textNode");//建立一個新的文本節點 var text = document.getElementById("text"); var flag = text.hasAttribute("value");//判斷元素節點是否有某個屬性 if(!flag){ text.setAttribute("value","new value");//設定某個節點的屬性值 } text.removeAttribute("value");//移除某個節點的某個屬性 var nodeName = text.nodeName;//分別得到nodeName，nodeType，nodeValue var nodeType = text.nodeType; var nodeValue = text.nodeValue; var pre = text.previousSibling;//得到上一個和下一個兄弟節點以及父節點 var aft = text.nextSibling; var parent = text.parentNode; text.appendChild(textNode);//添加一個子節點 var first = text.firstChild;//得到第一個和最後一個子節點 var last = text.lastChild; var remove = text.removeChild(textNode);//移除子節點 alert("test"); } </script> </head> <body> <div id="div1">Div1</div><br> <input type="button" value="TestAPI" onclick="test()"><br> <input type="text" id="text"><br> </body></html>
在FireFox中測試：
第二個測試代碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var i; var body; function iniPage(){//頁面載入時初始化頁面，給一些參數附上初值 i = 0; body = document.getElementsByTagName("body")[0]; } function insert(){//插入一個新的節點，追加在body的子節點的末尾 var newDiv = document.createElement("div");//建立一個新的div元素節點 newDiv.innerHTML = "Div " + i; body.appendChild(newDiv); i++; } function clone(){//複製最後一個子節點 var nodes = body.getElementsByTagName("div"); if(nodes.length==0){ alert("沒有可以複製的節點！"); return; } //var newNode = nodes[nodes.length-1].cloneNode(); //不行 //newNode = nodes[nodes.length-1]; //這種方式是不行的 var newNode = document.createElement("div");//建立一個新的div元素節點 newNode.innerHTML = nodes[nodes.length-1].innerHTML; body.appendChild(newNode); } function remove(){//移除最後一個節點 var nodes = body.getElementsByTagName("div"); if(nodes.length==0){ alert("沒有可以刪除的節點了！"); return; } body.removeChild(nodes[nodes.length-1]); } function replace(){//將第一個節點和最後一個節點進行交換 var nodes = body.getElementsByTagName("div"); if(nodes.length<2){ alert("已經不用替換了！"); return; } var firstNode = nodes[0]; var lastNode = nodes[nodes.length-1]; var replace = body.replaceChild(firstNode,lastNode);//用第一個節點去替換最後一個節點 body.insertBefore(replace,nodes[0]); } </script> </head> <body onload="iniPage()"> <input type="button" value="插入節點" onclick="insert()"> <input type="button" value="複製節點" onclick="clone()"> <input type="button" value="移除節點" onclick="remove()"> <input type="button" value="替換節點" onclick="replace()"> </body></html>
運行結果：
點擊插入節點三次：顯示出了三個Div
點擊 複製節點兩次：又出現了兩個 Div 2
點擊移除節點：最後一個節點被移除了
點擊 替換節點：第一個和最後一個節點位置發生了替換
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
