|
|
什么叫DOM，DOM是文檔對象模型(Document Object Model，是基于瀏覽器編程（在本教程中，可以說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，其中以Mozilla的瀏覽器最與標準接近。單純的Javascript要結合DOM才能做DHTML編程，才能做出漂亮的效果、應用于WEB。這點幾乎與其它的語言無異，正如C/C++需要庫支持是一樣的道理。否則就是單純的在語法上做研究了。因此，必須要對DOM有一定的認識，才能把Javascript應用于WEB，或你的RIA應用當中，因為DHTML本質上就是操作DOM樹。
以后的編程當中，希望你能夠把DHTML.chm這本手冊也拿上，如果你需要兼容gecko，把gecko的DOM手冊也帶上。因為API太多，想不起來的接口還可以查這本手冊。
如果你要測試瀏覽器是否是支持DOM的，簡單的一句就可以判斷
<script>
var isSupportDOM = !!document.getElementById; //兩個取反，這已經在上節中說過了，意思是強制轉型
alert("你的瀏覽器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script>
二、DOM樹
要注意：DOM樹的根統一為文檔根―document，DOM既然是樹狀結構，那么他們自然有如下的幾種關系:
根結點(document)
父結點(parentNode)
子結點(childNodes)
兄弟結點 兄弟結點
(sibling) (sibling)
例子：
假設網頁的HTML如下
<html>
<head>
<title>never-online's website</title>
</head>
<body>
<div>tutorial of DHTML and Javascript programming</div>
</body>
</html>
我們參照樹的概念，畫出該HTML文檔結構的DOM樹：
html
body head
div title
文本 文本
從上面的圖示可以看出
html有兩個子結點，而html就是這兩個子節點的父結點
head有節點title，title下有一個文本節點
doby下有節點div，div下有一個文本節點
三、操作DOM樹
開篇已經說過，DHTML本質就是操作DOM樹。如何操作它呢？
假設我要改變上面HTML文檔中div結點的文本，如何做？[code]<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var nodeRoot = document; //這個是根結點
var nodeHTML = nodeRoot.childNodes[0]; //這個是html結點
var nodeBody = nodeHTML.childNodes[1]; //body結點
var nodeDiv = nodeBody.childNodes[0]; //DIV結點
var nodeText = nodeDiv.childNodes[0];//文本結點'
nodeText.data = strText; //文本節點有data這個屬性，因此我們可以改變這個屬性，也就成功的操作了DOM樹中的一個結點了
}
</script>
</head>
<body>
<div>tutorial of DHTML and Javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
從上面的示例可以看出，我們可以用上面的這種方法操作DOM樹上的任一節點。（注：1. 跨域除外，跨域通常是在操作frame上，簡單的說，就是兩個frame不屬于同一域名。2.上面的操作為了演示，采用的方法是從根結點一直到文本結點的遍歷，在DOM方法上，有更簡潔的方法，這些以后會有更多示例加以說明，下文中也會有介紹）
三、DOM節點。
細心些的朋友也許發現了，在上面寫的HTML代碼時用<>與</>包函起來的就是一個結點，事實上是這樣的嗎？答案是否定的。下面就是說說節點類型，否則在有的時候是會犯錯誤的。比如，你把上面的代碼放到Mozilla firefox的瀏覽器里運行一下，就會知道了。
DOM中的結點類型比較多，這里寫一些在HTML文檔中（注：XML也是DOM樹結構）常見的幾種結點類型。
1、DOCUMENT_NODE
（document）文檔根結點類型，該枚舉型的值是9.
2、ELEMENT_NODE
（element）元素結點類型，該枚舉型的值是1。上文中的html, body, div這些結點都是屬于該類型。
3、TEXT_NODE
（text）文本結點類型，該枚舉型的值是3。上文中的文本，如：tutorial of DHTML and Javascript programming就是屬于該類型。
（注：一個空格也就可能是一個文本結點）
通常更需要注意的是文本結點，有可能一個回車，一個空格都是文本結點。這一點以后會碰到，當然，我們也有辦法處理，這里先不要急，以后也會說到的。
四、DOM常用的API
這些常用的API是要記下來的，當然在非IE的瀏覽器里也會有效，是符合w3c的。這些API在以后的編程中會常常用到。正如每個編程平臺所提供的API一樣，常用必須記下來，節省時間從而提高編程效率。只寫幾個最常用的，其它的API會在以后的示例中寫出。由淺而深，從易到難嘛。
1、獲取ELEMENT_NODE，元素節點
1)、方法：document.getElementById(元素的Id)，返回值為元素的節點引用。可以假想一下這個API的原理：象我們上面所做的是遍歷每個節點（從根到我們所需結點），這個API，也可以想成是從根遍歷，查詢每個結點（空白結點和空結點除外），并獲取該結點的id是否為指定的ID，如果是的話，就返回這個結點（注：在JS中，數組和對象是引用類型），如果沒有就返回空。我們可以寫寫這個代碼，幫助我們理解document.getElementById。下面是一個簡單遍歷BODY中元素的示例。
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //這個是根結點
var nodeHTML = nodeRoot.childNodes[0]; //這個是html結點
var nodeBody = nodeHTML.childNodes[1]; //body結點
var bodyChild = nodeBody.childNodes; //body的孩子
for (var i=0; i<bodyChild.length; i++) { //簡單的遍歷（指body的孩子下的深度為1)
if (bodyChild[i].id==id) return bodyChild[i];
};
return null;
}
function TestGetElementById (id) {
var node = myGetElementById(id);
if (node!=null) {
alert("找到結點 "+id+"!");
alert(node.childNodes[0].data);
} else {
alert("沒有找到結點 "+id+".");
}
}
</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and Javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>
2)、屬性：object.innerHTML，返回值：一個節點內的HTML值。該屬性為可寫屬性。它雖然不是獲取結點，但經常與獲取結點相結合，所以我把它放在獲取結點這一類，它的屬性就類似于是純文本節點屬性中的data。以document.getElementById和object.innerHTML這兩個API為例，我們就可以把上面所寫的代碼簡化一下了，示例如下：
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("textNode");
node.innerHTML = strText;
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and Javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
3)、方法：object.getElementsByTagName(標簽的名字)，返回一個集合，該集合的把有元素都是有指定標簽的元素。訪問集合里的元素，可以用下標來訪問。語法里的object，是指document（根）或者是一個ELEMENT_NODE。這個的原理示例我就不寫了，可以作為一個作業，大家可以寫寫。這里寫一些具體應用。如上例，我們還可以這樣寫。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and Javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
再取一個例子，注意，BODY下的結點深度為2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and Javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>
二、動態創建與插入結點
1)、創建結點對象。document.createElement(tagname)，tagname指的是一個標簽，比如一個DIV，就是document.createElement("DIV")，它返回的是這個結點的引用。
2)、在body的尾部插入結點用document.body.appendChild(object)，為了容易理解，下面這個示例，我用了IE專有的屬性object.outerHTML，得到一個該元素的HTML標簽內容（包括自身），這樣會更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and Javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
3)、在元素處插入結點。object.insertBefore(oNewNode [, oChildNode])，oNewNode為一個我們創建的結點，oChildNode是可選的，為object下的一個子節點。同樣的，為了看到效果，我也用了outerHTML。示例
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and Javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
三、移除結點。
1) object.parentNode.removeChild(oChildNode)，這個就是語法，下面看示例。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML：/n" +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and Javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>
這一節就先寫到這里，下一節我們就可以用這幾個簡單的API做許多事情了，幾個API就可以寫出很多效果。:D
JavaScript技術：Javascript &amp; DHTML 實例編程（教程）DOM基礎和基本API，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
