首頁 > 開發者 > JavaScript
如果你要測試瀏覽器是否是支援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
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
