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