首頁新隨筆新文章聯系聚合

posts - 23,comments - 1,trackbacks - 0

2006年9月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

常用鏈接

留言簿(1)

隨筆檔案

文章檔案

常去的站點

董路blog

搜索

閱讀排行榜

評論排行榜

JavaScript高級應用：使用DOM技術操縱文檔[轉摘]

aaa

在前端展現越來越豐富的今天，DOM對象可以說變得非常重要(其實一直都重要)，下面轉摘一篇寫的不錯的文檔，供大家以后查閱：

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

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>

</P>

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

<!--

alert(

"頁面初始狀態" + "\n\n" +

"bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" +

"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n"

);

bodyNode.firstChild.nodeValue = "This is the new document body, set by the nodeValue property";

p3Node.childNodes[1].src = "myexam2.gif";

alert(

"對頁面內容進行修改后" + "\n\n" +

"bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" +

"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" +

"p3Node.childNodes[1].src = " + p3Node.childNodes[1].src

);

// -->

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

上述代碼首先顯示頁面的初始內容以及節點p1Node的相關屬性值，然后對節點bodyNode的第1個孩子節點的nodeValue屬性進行賦值修改其文本內容，對節點p3Node的第2個孩子節點（也就是了img標記）的src屬性進行賦值修改圖形的內容。使用createElement方法 createElement 方法的功能是在文檔中創建一個孤立HTML標記節點。孤立節點既沒有孩子節點也沒有雙親節點，而且與文檔中的現存節點也互不關聯。被創建的孤立HTML標記節點的唯一信息就是它代表的HTML標記，比如< P>、< FONT>和< TABLE>。CreateElement的語法為document.createElement(HTMLTag)，HTMLTag表示要創建的 HTML標記，返回值是創建的孤立HTML標記節點。來看看下面的例子：

上述代碼在文檔中創建了4個孤立HTML標記節點tableObj、tbodyObj、trObj和tdObj，它們就象太空中4顆人造衛星一樣，彼此間以及和文檔中的現有節點間都互不關聯。創建孤立節點的目的不是為了讓它真正孤立，隨后我們會介紹如何將創建的孤立節點彼此相連，并添加到文檔的DOM Tree結構中。使用cloneNode方法 cloneNode方法的功能是通過克隆（也就是復制）文檔中一個現存節點的方式創建文檔的一個孤立節點。根據被克隆節點的類型，新創建的孤立節點或者是HTML標記節點，或者是包含字符串信息的文本項節點。 cloneNode的語法為oldNode.createNode(false)或者oldNode.createNode(true)，oldNode 表示被克隆的節點，返回值是新創建的節點，false表示僅僅克隆oldNode，true表示克隆oldNode并包含其下屬節點。來看看下面的例子：

<!--

alert("頁面初始狀態");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

tr1Obj = document.createElement("TR");

tr2Obj = tr1Obj.cloneNode(false);

tr3Obj = tr1Obj.cloneNode(false);

tr1td1Obj = document.createElement("TD");

tr1td2Obj = tr1td1Obj.cloneNode(false);

tr2td1Obj = tr1td1Obj.cloneNode(false);

tr2td2Obj = tr1td1Obj.cloneNode(false);

tr3td1Obj = tr1td1Obj.cloneNode(false);

tr3td2Obj = tr1td1Obj.cloneNode(false);

row1cell1Obj = document.createTextNode("This is row 1, cell 1");

row1cell2Obj = row1cell1Obj.cloneNode(false);

row2cell1Obj = row1cell1Obj.cloneNode(false);

row2cell2Obj = row1cell1Obj.cloneNode(false);

row3cell1Obj = row1cell1Obj.cloneNode(false);

row3cell2Obj = row1cell1Obj.cloneNode(false);

row1cell2Obj.nodeValue = "This is row 1, cell 2";

row2cell1Obj.nodeValue = "This is row 2, cell 1";

row2cell2Obj.nodeValue = "This is row 2, cell 2";

row3cell1Obj.nodeValue = "This is row 3, cell 1";

row3cell2Obj.nodeValue = "This is row 3, cell 2";

alert(

"對頁面內容進行修改后" + "\n" +

"row1cell2Obj.firstChild = " + row1cell2Obj.firstChild+ "\n" +

"row1cell2Obj = " + row1cell2Obj + "\n" +

"row3cell2Obj.nodeValue = " + row3cell2Obj.nodeValue + "\n" +

"tr3td2Obj.nodeName = " + tr3td2Obj.nodeName + "\n"

);

// -->

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

上述代碼中值得注意的是對文本項節點的處理方式： 1、首先，使用語句row1cell1Obj = document.createTextNode("This is row 1, cell 1")創建單元格（1，1）所在節點； 2、然后使用語句row1cell1Obj.cloneNode(false)分別創建其他單元格節點； 3、最后，使用語句node.nodeValue = string分別為不同單元格賦值。使用appendChild方法 appendChild 方法的功能是在2個節點間建立起父子關系，如果作為父親的節點已經具有了孩子節點，那么新添加的孩子節點被追加為最后一個孩子，也就是 lastChild。appendChild的語法是fatherObj.appendChild(childObj)，返回值是被追加的孩子節點。來看看下面的例子：

<!--

alert("頁面初始狀態");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

tr1Obj = document.createElement("TR");

tr2Obj = tr1Obj.cloneNode();

tr3Obj = tr1Obj.cloneNode();

tr1td1Obj = document.createElement("TD");

tr1td2Obj = tr1td1Obj.cloneNode();

tr2td1Obj = tr1td1Obj.cloneNode();

tr2td2Obj = tr1td1Obj.cloneNode();

tr3td1Obj = tr1td1Obj.cloneNode();

tr3td2Obj = tr1td1Obj.cloneNode();

row1cell1Obj = document.createTextNode("This is row 1, cell 1");

row1cell2Obj = row1cell1Obj.cloneNode();

row2cell1Obj = row1cell1Obj.cloneNode();

row2cell2Obj = row1cell1Obj.cloneNode();

row3cell1Obj = row1cell1Obj.cloneNode();

row3cell2Obj = row1cell1Obj.cloneNode();

row1cell2Obj.nodeValue = "This is row 1, cell 2";

row2cell1Obj.nodeValue = "This is row 2, cell 1";

row2cell2Obj.nodeValue = "This is row 2, cell 2";

row3cell1Obj.nodeValue = "This is row 3, cell 1";

row3cell2Obj.nodeValue = "This is row 3, cell 2";

returnValue = tableObj.appendChild(tbodyObj);

tbodyObj.appendChild(tr1Obj);

tbodyObj.appendChild(tr2Obj);

tbodyObj.appendChild(tr3Obj);

tr1Obj.appendChild(tr1td1Obj);

tr1Obj.appendChild(tr1td2Obj);

tr2Obj.appendChild(tr2td1Obj);

tr2Obj.appendChild(tr2td2Obj);

tr3Obj.appendChild(tr3td1Obj);

tr3Obj.appendChild(tr3td2Obj);

tr1td1Obj.appendChild(row1cell1Obj);

tr1td2Obj.appendChild(row1cell2Obj);

tr2td1Obj.appendChild(row2cell1Obj);

tr2td2Obj.appendChild(row2cell2Obj);

tr3td1Obj.appendChild(row3cell1Obj);

tr3td2Obj.appendChild(row3cell2Obj);

bodyNode.appendChild(tableObj);

alert("對頁面內容進行修改后");

// -->

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

上面的代碼演示了一個Table的動態創建過程。首先創建Table的各個行、列以及單元格的節點，然后使用appendChild將這些節點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table裝載進文檔中。使用applyElement方法 applyElement 方法的功能是將一個節點與它的孩子節點和父親節點脫離，然后將另外一個節點連接到這個節點，最終使它們成為父子關系。applyElement的語法是 childObj.applyElement(fatherObj)，返回值是被連接的孩子節點。我們注意到，applyElement和appendChild實現的目的基本相同，都是在2個節點間建立父子關系，但有2個區別： 1、applyElement方法只能操縱HTML標記節點，不能處理文本項節點。appendNode則能處理2種節點。 2、appendNode對2個節點的連接方式是從父到子，applyElement則是從子到父。來看看下面的例子：

<!--

alert("頁面初始狀態");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

tr1Obj = document.createElement("TR");

tr2Obj = tr1Obj.cloneNode();

tr3Obj = tr1Obj.cloneNode();

tr1td1Obj = document.createElement("TD");

tr1td2Obj = tr1td1Obj.cloneNode();

tr2td1Obj = tr1td1Obj.cloneNode();

tr2td2Obj = tr1td1Obj.cloneNode();

tr3td1Obj = tr1td1Obj.cloneNode();

tr3td2Obj = tr1td1Obj.cloneNode();

row1cell1Obj = document.createTextNode("This is row 1, cell 1");

row1cell2Obj = row1cell1Obj.cloneNode();

row2cell1Obj = row1cell1Obj.cloneNode();

row2cell2Obj = row1cell1Obj.cloneNode();

row3cell1Obj = row1cell1Obj.cloneNode();

row3cell2Obj = row1cell1Obj.cloneNode();

row1cell2Obj.nodeValue = "This is row 1, cell 2";

row2cell1Obj.nodeValue = "This is row 2, cell 1";

row2cell2Obj.nodeValue = "This is row 2, cell 2";

row3cell1Obj.nodeValue = "This is row 3, cell 1";

row3cell2Obj.nodeValue = "This is row 3, cell 2";

tr1td1Obj.appendChild(row1cell1Obj);

tr1td2Obj.appendChild(row1cell2Obj);

tr2td1Obj.appendChild(row2cell1Obj);

tr2td2Obj.appendChild(row2cell2Obj);

tr3td1Obj.appendChild(row3cell1Obj);

tr3td2Obj.appendChild(row3cell2Obj);

tr1td1Obj.applyElement(tr1Obj);

tr1Obj.appendChild(tr1td2Obj);

tr2td1Obj.applyElement(tr2Obj);

tr2Obj.appendChild(tr2td2Obj);

tr3td1Obj.applyElement(tr3Obj);

tr3Obj.appendChild(tr3td2Obj);

tr1Obj.applyElement(tbodyObj);

tbodyObj.appendChild(tr2Obj);

tbodyObj.appendChild(tr3Obj);

returnValue = tbodyObj.applyElement(tableObj);

bodyNode.appendChild(tableObj);

alert("對頁面內容進行修改后");

// -->

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

上面的代碼同樣演示了一個Table的動態創建過程。首先創建Table的各個行、列以及單元格的節點，然后混合使用applyElement和 appendChild將這些節點進行連接形成一個Table，最后通過語句bodyNode.appendChild(tableObj)將Table 裝載進文檔中使用insertBefore方法 insertBefore方法的功能和 appendChild相似，都是將一個孩子節點連接到一個父親節點，但insertBefore方法允許我們指定孩子節點的位置。 insertBefore的語法是fatherObj.insertBefore(childObj, brotherObj)，返回值是被連接的孩子節點。執行后，childObj的位置在brotherObj之前。來看看下面的例子：

<!--

alert("頁面初始狀態");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

tr1Obj = document.createElement("TR");

tr2Obj = tr1Obj.cloneNode();

tr3Obj = tr1Obj.cloneNode();

tr1td1Obj = document.createElement("TD");

tr1td2Obj = tr1td1Obj.cloneNode();

tr2td1Obj = tr1td1Obj.cloneNode();

tr2td2Obj = tr1td1Obj.cloneNode();

tr3td1Obj = tr1td1Obj.cloneNode();

tr3td2Obj = tr1td1Obj.cloneNode();

row1cell1Obj = document.createTextNode("This is row 1, cell 1");

row1cell2Obj = row1cell1Obj.cloneNode();

row2cell1Obj = row1cell1Obj.cloneNode();

row2cell2Obj = row1cell1Obj.cloneNode();

row3cell1Obj = row1cell1Obj.cloneNode();

row3cell2Obj = row1cell1Obj.cloneNode();

row1cell2Obj.nodeValue = "This is row 1, cell 2";

row2cell1Obj.nodeValue = "This is row 2, cell 1";

row2cell2Obj.nodeValue = "This is row 2, cell 2";

row3cell1Obj.nodeValue = "This is row 3, cell 1";

row3cell2Obj.nodeValue = "This is row 3, cell 2";

returnValue = tableObj.insertBefore(tbodyObj);

tbodyObj.insertBefore(tr3Obj);

tbodyObj.insertBefore(tr2Obj, tr3Obj);

tbodyObj.insertBefore(tr1Obj, tr2Obj);

tr1Obj.insertBefore(tr1td2Obj);

tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);

tr2Obj.insertBefore(tr2td2Obj);

tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);

tr3Obj.insertBefore(tr3td2Obj);

tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);

tr1td2Obj.insertBefore(row1cell2Obj);

tr1td1Obj.insertBefore(row1cell1Obj);

tr2td2Obj.insertBefore(row2cell2Obj);

tr2td1Obj.insertBefore(row2cell1Obj);

tr3td2Obj.insertBefore(row3cell2Obj);

tr3td1Obj.insertBefore(row3cell1Obj);

bodyNode.insertBefore(tableObj);

// -->

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

上面的代碼又一次演示了一個Table的動態創建過程。首先創建Table的各個行、列以及單元格的節點，然后混合使用insertBefore將這些節點進行連接形成一個Table，最后通過語句bodyNode. insertBefore (tableObj)將Table裝載進文檔中。可以看到，如果省略掉第2個參數brotherObj采用fatherObj.insertBefore (childObj)方式，那么一定是在要連入的父親節點還沒有孩子節點的情況下，這時，就和appendNode方法的功能完全一樣了。使用removeNode方法 removeNode 方法的功能是刪除一個節點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節點。removeNode（false）表示僅僅刪除指定節點，然后這個節點的原孩子節點提升為原雙親節點的孩子節點。removeNode（true）表示刪除指定節點及其所有下屬節點。被刪除的節點成為了孤立節點，不再具有有孩子節點和雙親節點。來看看下面的例子：

<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

<TBODY>

<TR>

<TR>

<TR>

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

<!--

var msg = "";

function printChildren() {

childCount = bodyNode.childNodes.length;

msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;

for(var i = 0; i < childCount; i++) {

msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n";

}

alert(msg);

}

msg="頁面初始狀態" + "\n\n"

printChildren();

msg="對頁面內容進行修改后" + "\n\n"

msg += "Deleting Paragraph 3\n";

var deletedNode = p3Node.removeNode(false);

msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n";

msg += "deletedNode.childNodes.length = " + deletedNode.childNodes.length + "\n";

printChildren();

// -->

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

上述代碼首先顯示頁面的初始內容以及bodyNode的每個孩子節點的nodeName屬性值，然后僅僅刪除p3Node。刪除p3Node前， bodyNode有6個孩子節點，p3Node有4個孩子節點。刪除p3Node后，節點p3Node的4個孩子節點提升為bodyNode的孩子節點，這樣bodyNode就有了9個節點。p3Node被刪除后返回值為deletedNode，它的nodeName屬性值為P，孩子節點數為0，也就是說，它成為一個孤立節點。現在我們將上述代碼中的deletedNode = p3Node.removeNode(false)修改為deletedNode = p3Node.removeNode(true)，你會看到，刪除p3Node后，bodyNode的孩子節點數變為5。使用replaceNode方法 replaceNode方法的功能是用新創建的節點替換一個節點及其下屬節點，語法為oldNode.replaceNode(newNode)，返回值是被替換的節點。來看看下面的例子：

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>

</P>

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

<!--

var msg = "";

function printChildren() {

childCount = bodyNode.childNodes.length;

msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;

for(var i = 0; i < childCount; i++) {

msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n";

}

alert(msg);

}

msg="頁面初始狀態" + "\n\n"

printChildren();

msg="對頁面內容進行修改后" + "\n\n"

msg += "Replacing Paragraph 3\n";

var b = document.createTextNode("New Body Page");

var replacedNode = p3Node.replaceNode(b);

msg += "replacedNode.nodeName = " + replacedNode.nodeName + "\n";

msg += "replacedNode.childNodes.length = " + replacedNode.childNodes.length + "\n";

msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";

printChildren();

// -->

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

上述代碼首先顯示頁面的初始內容以及bodyNode的每個孩子節點的nodeName屬性值，然后用新創建的文本項節點替換p3Node。替換后， bodyNode的孩子節點數目沒有變，原來的P節點替換為文本項節點。變量replaceNode表示被替換的節點p3Node，它仍包含原來的4個孩子節點。 replaceNode方法的另一個功能是刪除節點及其下屬節點，就象前面介紹的removeNode（true）一樣。這時，我們只需將replaceNode方法的參數設置為一個現存的節點就可以。現在，我們將上述代碼中的b = document.createTextNode("New Body Page")修改為b = p2Node，你會看到，p3Node及其下屬節點被刪除了，沒有替換節點生成，bodyNode的孩子節點數變為5。如果replaceNode方法的參數為空，也就是執行replaceNode（），那么將導致瀏覽器腳本運行錯誤。使用swapNode方法 swapNode方法的功能是交換2個節點（包括其下屬節點）在文檔Tree中的位置，語法為firstNode.swapNode(secondNode)，返回值是節點firstNode。來看看下面的例子：

<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

<TBODY>

<TR>

<TR>

<TR>

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

<!--

var msg = "";

function printChildren() {

childCount = bodyNode.childNodes.length;

msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ;

for(var i = 0; i < childCount; i++) {

msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n";

}

alert(msg);

}

msg="頁面初始狀態" + "\n\n"

printChildren();

msg="對頁面內容進行修改后" + "\n\n"

msg += "Swapping Paragraph 3 with Paragraph 2\n";

var b = p2Node;

var swappedNode = p3Node.swapNode(b);

msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n";

msg += "swappedNode.childNodes.length = " + swappedNode.childNodes.length + "\n";

msg += "p2Node.nodeName = " + p2Node.nodeName + "\n";

printChildren();

// -->

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

上述代碼首先顯示頁面的初始內容以及bodyNode的每個孩子節點的nodeName屬性值，然后交換p3Node和p2Node的位置。交換后，bodyNode的孩子節點數目沒有變，變量swappedNode表示p3Node，它仍包含原來的4個孩子節點。 swapNode 方法的另一個功能是替換節點及其下屬節點，就象前面介紹的replaceNode方法一樣。這時，我們只需將replaceNode方法的參數設置為一個新創建的節點就可以。現在，我們將上述代碼中的b = p2Node修改為b = document.createTextNode("This is a swapped in text")，你會看到，p3Node及其下屬節點被新創建的文本項節點所替換，原來的節點類型P變為了文本項節點類型#text。

轉摘自http://bbs.javascript.com.cn/simple/index.php?t180.html

posted on 2006-09-21 20:58 一縷青煙閱讀(151) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

常用鏈接

留言簿(1)

隨筆檔案

文章檔案

常去的站點

搜索

最新評論

閱讀排行榜

評論排行榜

aaa