JavaScript高級應用：使用DOM技術(shù)操縱文檔

figol 2006-07-20

展開全文

JavaScript高級應用：使用DOM技術(shù)操縱文檔

JavaScript高級應用：使用DOM技術(shù)操縱文檔 [第八色彩專業(yè)交友社區(qū)]
分類： Web開發(fā):JavaScript
作者：甘冀平
出處： http://www.
閱讀次數(shù)： 420

　　我們知道，如果使用DHTML對象模型對文檔的內(nèi)容進行操縱，就必須了解相關(guān)文檔元素的特殊屬性和方法。因為文檔的元素有很多種，相應的屬性和方法也就非常多，為了實現(xiàn)一個功能，開發(fā)人員不得不查詢許多資料。但是有了DOM技術(shù)，一切變得簡單起來，那些操縱文檔內(nèi)容的屬性和方法具備了元素無關(guān)性（element-independent）特點，這使得我們能夠按照相同的步驟操縱文檔內(nèi)容。毋庸置疑，DOM技術(shù)為開發(fā)人員在對象層次上操縱文檔提供了最便捷的手段。

本文就為你全面介紹在JavaScript中如何使用DOM屬性和方法操縱文檔內(nèi)容。

使用data、nodeValue和src屬性

DOM 提供了2個屬性用于修改文本節(jié)點的內(nèi)容，它們是data和nodeVaule。2個屬性實現(xiàn)的功能相同，語法是：object.data="new value"或者object.nodeVaule="new value"，其中object代表頁面中的文本項節(jié)點。如果修改圖形文件的內(nèi)容，語法是：object.src="new value"，其中object表示頁面中的img標記節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

This is the document body

<P ID = "p1Node">This is paragraph 1.</P>

<P ID = "p2Node">This is paragraph 2.</P>

<P ID = "p3Node">This is paragraph 3.

<IMG ID = "imgNode" SRC="myexam.gif">This text follows the image

<TABLE ID="tableNode">

<TR><TD BGCOLOR=yellow>This is row 1, cell 1</TD><TD BGCOLOR=orange>This is row 1, cell 2</TD></TR>

<TR><TD BGCOLOR=red>This is row 2, cell 1</TD><TD BGCOLOR=magenta>This is row 2, cell 2</TD></TR>

<TR><TD BGCOLOR=lightgreen>This is row 3, cell 1</TD><TD BGCOLOR=beige>This is row 3, cell 2</TD></TR>

</TABLE>

</P>

<P ID = "p4Node">This is paragraph 4.</P>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上述代碼首先顯示頁面的初始內(nèi)容以及節(jié)點p1Node的相關(guān)屬性值，然后對節(jié)點bodyNode的第1個孩子節(jié)點的nodeValue屬性進行賦值修改其文本內(nèi)容，對節(jié)點p3Node的第2個孩子節(jié)點（也就是了img標記）的src屬性進行賦值修改圖形的內(nèi)容。

使用createElement方法

createElement 方法的功能是在文檔中創(chuàng)建一個孤立HTML標記節(jié)點。孤立節(jié)點既沒有孩子節(jié)點也沒有雙親節(jié)點，而且與文檔中的現(xiàn)存節(jié)點也互不關(guān)聯(lián)。被創(chuàng)建的孤立HTML標記節(jié)點的唯一信息就是它代表的HTML標記，比如< P>、< FONT>和< TABLE>。CreateElement的語法為document.createElement(HTMLTag)，HTMLTag表示要創(chuàng)建的 HTML標記，返回值是創(chuàng)建的孤立HTML標記節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</BODY>

</HTML>

上述代碼在文檔中創(chuàng)建了4個孤立HTML標記節(jié)點tableObj、tbodyObj、trObj和tdObj，它們就象太空中4顆人造衛(wèi)星一樣，彼此間以及和文檔中的現(xiàn)有節(jié)點間都互不關(guān)聯(lián)。創(chuàng)建孤立節(jié)點的目的不是為了讓它真正孤立，隨后我們會介紹如何將創(chuàng)建的孤立節(jié)點彼此相連，并添加到文檔的DOM Tree結(jié)構(gòu)中。

使用cloneNode方法

cloneNode方法的功能是通過克隆（也就是復制）文檔中一個現(xiàn)存節(jié)點的方式創(chuàng)建文檔的一個孤立節(jié)點。根據(jù)被克隆節(jié)點的類型，新創(chuàng)建的孤立節(jié)點或者是HTML標記節(jié)點，或者是包含字符串信息的文本項節(jié)點。 cloneNode的語法為oldNode.createNode(false)或者oldNode.createNode(true)，oldNode 表示被克隆的節(jié)點，返回值是新創(chuàng)建的節(jié)點，false表示僅僅克隆oldNode，true表示克隆oldNode并包含其下屬節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上述代碼中值得注意的是對文本項節(jié)點的處理方式：

1、首先，使用語句row1cell1Obj = document.createTextNode("This is row 1, cell 1")創(chuàng)建單元格（1，1）所在節(jié)點；

2、然后使用語句row1cell1Obj.cloneNode(false)分別創(chuàng)建其他單元格節(jié)點；

3、最后，使用語句node.nodeValue = string分別為不同單元格賦值。
使用appendChild方法

appendChild 方法的功能是在2個節(jié)點間建立起父子關(guān)系，如果作為父親的節(jié)點已經(jīng)具有了孩子節(jié)點，那么新添加的孩子節(jié)點被追加為最后一個孩子，也就是 lastChild。appendChild的語法是fatherObj.appendChild(childObj)，返回值是被追加的孩子節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上面的代碼演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點，然后使用appendChild將這些節(jié)點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table裝載進文檔中。

使用applyElement方法

applyElement 方法的功能是將一個節(jié)點與它的孩子節(jié)點和父親節(jié)點脫離，然后將另外一個節(jié)點連接到這個節(jié)點，最終使它們成為父子關(guān)系。applyElement的語法是 childObj.applyElement(fatherObj)，返回值是被連接的孩子節(jié)點。

我們注意到，applyElement和appendChild實現(xiàn)的目的基本相同，都是在2個節(jié)點間建立父子關(guān)系，但有2個區(qū)別：

1、applyElement方法只能操縱HTML標記節(jié)點，不能處理文本項節(jié)點。appendNode則能處理2種節(jié)點。

2、appendNode對2個節(jié)點的連接方式是從父到子，applyElement則是從子到父。

來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上面的代碼同樣演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點，然后混合使用applyElement和 appendChild將這些節(jié)點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table 裝載進文檔中

使用insertBefore方法

insertBefore方法的功能和 appendChild相似，都是將一個孩子節(jié)點連接到一個父親節(jié)點，但insertBefore方法允許我們指定孩子節(jié)點的位置。 insertBefore的語法是fatherObj.insertBefore(childObj, brotherObj)，返回值是被連接的孩子節(jié)點。執(zhí)行后，childObj的位置在brotherObj之前。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上面的代碼又一次演示了一個Table的動態(tài)創(chuàng)建過程。首先創(chuàng)建Table的各個行、列以及單元格的節(jié)點，然后混合使用insertBefore將這些節(jié)點進行連接形成一個Table，最后通過語句bodyNode. insertBefore (tableObj)將Table裝載進文檔中?？梢钥吹剑绻÷缘舻?個參數(shù)brotherObj采用fatherObj.insertBefore (childObj)方式，那么一定是在要連入的父親節(jié)點還沒有孩子節(jié)點的情況下，這時，就和appendNode方法的功能完全一樣了。

使用removeNode方法

removeNode 方法的功能是刪除一個節(jié)點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點。removeNode（false）表示僅僅刪除指定節(jié)點，然后這個節(jié)點的原孩子節(jié)點提升為原雙親節(jié)點的孩子節(jié)點。removeNode（true）表示刪除指定節(jié)點及其所有下屬節(jié)點。被刪除的節(jié)點成為了孤立節(jié)點，不再具有有孩子節(jié)點和雙親節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD>

<BODY id=bodyNode>This is the document body

<P id=p1Node>This is paragraph 1.</P>

<P id=p2Node>This is paragraph 2.</P>

<P id=p3Node>This is paragraph 3. <IMG id=imgNode

src="myexam.gif">This text follows the image

<TABLE id=tableNode>

<TBODY>

<TR>

<TD bgColor=yellow>This is row 1, cell 1</TD>

<TD bgColor=orange>This is row 1, cell 2</TD></TR>

<TR>

<TD bgColor=red>This is row 2, cell 1</TD>

<TD bgColor=magenta>This is row 2, cell 2</TD></TR>

<TR>

<TD bgColor=lightgreen>This is row 3, cell 1</TD>

<TD bgColor=beige>This is row 3, cell 2</TD></TR></TBODY></TABLE></P>

<P id=p4Node>This is paragraph 4.</P>

<SCRIPT language=JavaScript>



</SCRIPT></BODY></HTML>

上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值，然后僅僅刪除p3Node。刪除p3Node前， bodyNode有6個孩子節(jié)點，p3Node有4個孩子節(jié)點。刪除p3Node后，節(jié)點p3Node的4個孩子節(jié)點提升為bodyNode的孩子節(jié)點，這樣bodyNode就有了9個節(jié)點。p3Node被刪除后返回值為deletedNode，它的nodeName屬性值為P，孩子節(jié)點數(shù)為0，也就是說，它成為一個孤立節(jié)點。

現(xiàn)在我們將上述代碼中的deletedNode = p3Node.removeNode(false)修改為deletedNode = p3Node.removeNode(true)，你會看到，刪除p3Node后，bodyNode的孩子節(jié)點數(shù)變?yōu)?。
使用replaceNode方法

replaceNode方法的功能是用新創(chuàng)建的節(jié)點替換一個節(jié)點及其下屬節(jié)點，語法為oldNode.replaceNode(newNode)，返回值是被替換的節(jié)點。來看看下面的例子：

<HTML><HEAD><TITLE> DOM Demo </title></HEAD>

<BODY ID="bodyNode">

This is the document body

<P ID = "p1Node">This is paragraph 1.</P>

<P ID = "p2Node">This is paragraph 2.</P>

<P ID = "p3Node">This is paragraph 3.

<IMG ID = "imgNode" SRC="myexam.gif">This text follows the image

<TABLE ID="tableNode">

<TR><TD BGCOLOR=yellow>This is row 1, cell 1</TD><TD BGCOLOR=orange>This is row 1, cell 2</TD></TR>

<TR><TD BGCOLOR=red>This is row 2, cell 1</TD><TD BGCOLOR=magenta>This is row 2, cell 2</TD></TR>

<TR><TD BGCOLOR=lightgreen>This is row 3, cell 1</TD><TD BGCOLOR=beige>This is row 3, cell 2</TD></TR>

</TABLE>

</P>

<P ID = "p4Node">This is paragraph 4.</P>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT></BODY></HTML>

上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值，然后用新創(chuàng)建的文本項節(jié)點替換p3Node。替換后， bodyNode的孩子節(jié)點數(shù)目沒有變，原來的P節(jié)點替換為文本項節(jié)點。變量replaceNode表示被替換的節(jié)點p3Node，它仍包含原來的4個孩子節(jié)點。

replaceNode方法的另一個功能是刪除節(jié)點及其下屬節(jié)點，就象前面介紹的removeNode（true）一樣。這時，我們只需將replaceNode方法的參數(shù)設(shè)置為一個現(xiàn)存的節(jié)點就可以?，F(xiàn)在，我們將上述代碼中的b = document.createTextNode("New Body Page")修改為b = p2Node，你會看到，p3Node及其下屬節(jié)點被刪除了，沒有替換節(jié)點生成，bodyNode的孩子節(jié)點數(shù)變?yōu)?。

如果replaceNode方法的參數(shù)為空，也就是執(zhí)行replaceNode（），那么將導致瀏覽器腳本運行錯誤。

使用swapNode方法

swapNode方法的功能是交換2個節(jié)點（包括其下屬節(jié)點）在文檔Tree中的位置，語法為firstNode.swapNode(secondNode)，返回值是節(jié)點firstNode。來看看下面的例子：

<HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD>

<BODY id=bodyNode>This is the document body

<P id=p1Node>This is paragraph 1.</P>

<P id=p2Node>This is paragraph 2.</P>

<P id=p3Node>This is paragraph 3. <IMG id=imgNode

src="myexam.gif">This text follows the image

<TABLE id=tableNode>

<TBODY>

<TR>

<TD bgColor=yellow>This is row 1, cell 1</TD>

<TD bgColor=orange>This is row 1, cell 2</TD></TR>

<TR>

<TD bgColor=red>This is row 2, cell 1</TD>

<TD bgColor=magenta>This is row 2, cell 2</TD></TR>

<TR>

<TD bgColor=lightgreen>This is row 3, cell 1</TD>

<TD bgColor=beige>This is row 3, cell 2</TD></TR></TBODY></TABLE></P>

<P id=p4Node>This is paragraph 4.</P>

<SCRIPT language=JavaScript>



</SCRIPT></BODY></HTML>

上述代碼首先顯示頁面的初始內(nèi)容以及bodyNode的每個孩子節(jié)點的nodeName屬性值，然后交換p3Node和p2Node的位置。交換后，bodyNode的孩子節(jié)點數(shù)目沒有變，變量swappedNode表示p3Node，它仍包含原來的4個孩子節(jié)點。

swapNode 方法的另一個功能是替換節(jié)點及其下屬節(jié)點，就象前面介紹的replaceNode方法一樣。這時，我們只需將replaceNode方法的參數(shù)設(shè)置為一個新創(chuàng)建的節(jié)點就可以?，F(xiàn)在，我們將上述代碼中的b = p2Node修改為b = document.createTextNode("This is a swapped in text")，你會看到，p3Node及其下屬節(jié)點被新創(chuàng)建的文本項節(jié)點所替換，原來的節(jié)點類型P變?yōu)榱宋谋卷椆?jié)點類型#text。

結(jié) 語

以上我們詳細講解了JavaScript語言中在層次關(guān)系上操縱對象的各種DOM屬性和方法原理，并且配以例程演示了實際的運行效果。我相信你已經(jīng)完全掌握了如何使用這些方法，并會逐漸加深對DOM技術(shù)的喜愛。因為，DOM技術(shù)確實簡化了文檔對象的訪問方式，為開發(fā)人員在對象層次上操縱文檔提供了最便捷的手段。