免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP

首頁(yè)

好書

留言交流

下載APP

聯(lián)系客服
JavaScript高級(jí)應(yīng)用：使用DOM技術(shù)操縱文檔
JavaScript高級(jí)應(yīng)用：使用DOM技術(shù)操縱文檔

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

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


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


使用data、nodeValue和src屬性


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


<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">

<!--

alert(

"頁(yè)面初始狀態(tài)" + "\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(

"對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\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>



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

使用createElement方法


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


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

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

alert("頁(yè)面初始狀態(tài)");

tableObj = document.createElement("TABLE");

tbodyObj = document.createElement("TBODY");

trObj = document.createElement("TR");

tdObj = document.createElement("TD");

alert(

"對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\n" +

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

"tableObj.nodeName = " + tableObj.nodeName + "\n" +

"tbodyObj.nodeName = " + tbodyObj.nodeName + "\n" +

"trObj.nodeName = " + trObj.nodeName + "\n" +

"tdObj.nodeName = " + tdObj.nodeName + "\n" +

"tableObj = " + tableObj + "\n"

);

// -->

</SCRIPT>

</BODY>

</HTML>


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

使用cloneNode方法


cloneNode方法的功能是通過(guò)克?。ㄒ簿褪菑?fù)制）文檔中一個(gè)現(xiàn)存節(jié)點(diǎn)的方式創(chuàng)建文檔的一個(gè)孤立節(jié)點(diǎn)。根據(jù)被克隆節(jié)點(diǎn)的類型，新創(chuàng)建的孤立節(jié)點(diǎn)或者是HTML標(biāo)記節(jié)點(diǎn)，或者是包含字符串信息的文本項(xiàng)節(jié)點(diǎn)。 cloneNode的語(yǔ)法為oldNode.createNode(false)或者oldNode.createNode(true)，oldNode 表示被克隆的節(jié)點(diǎn)，返回值是新創(chuàng)建的節(jié)點(diǎn)，false表示僅僅克隆oldNode，true表示克隆oldNode并包含其下屬節(jié)點(diǎn)。來(lái)看看下面的例子：



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

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

alert("頁(yè)面初始狀態(tài)");

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(

"對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\n" +

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

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

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

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

);

// -->

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



上述代碼中值得注意的是對(duì)文本項(xiàng)節(jié)點(diǎn)的處理方式：


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

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

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


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


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

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

alert("頁(yè)面初始狀態(tài)");

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("對(duì)頁(yè)面內(nèi)容進(jìn)行修改后");

// -->

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



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

使用applyElement方法


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


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


1、applyElement方法只能操縱HTML標(biāo)記節(jié)點(diǎn)，不能處理文本項(xiàng)節(jié)點(diǎn)。appendNode則能處理2種節(jié)點(diǎn)。

2、appendNode對(duì)2個(gè)節(jié)點(diǎn)的連接方式是從父到子，applyElement則是從子到父。


來(lái)看看下面的例子：




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

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

alert("頁(yè)面初始狀態(tài)");

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("對(duì)頁(yè)面內(nèi)容進(jìn)行修改后");

// -->

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



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

使用insertBefore方法


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



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

<BODY ID="bodyNode">

<SCRIPT LANGUAGE="JavaScript">

<!--

alert("頁(yè)面初始狀態(tài)");

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>



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


使用removeNode方法


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



<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>

<!--

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="頁(yè)面初始狀態(tài)" + "\n\n"

printChildren();



msg="對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\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>



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

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


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


<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">

<!--

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="頁(yè)面初始狀態(tài)" + "\n\n"

printChildren();



msg="對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\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>



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

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

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

使用swapNode方法


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


<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>

<!--

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="頁(yè)面初始狀態(tài)" + "\n\n"

printChildren();



msg="對(duì)頁(yè)面內(nèi)容進(jìn)行修改后" + "\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>



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


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

結(jié) 語(yǔ)


以上我們?cè)敿?xì)講解了JavaScript語(yǔ)言中在層次關(guān)系上操縱對(duì)象的各種DOM屬性和方法原理，并且配以例程演示了實(shí)際的運(yùn)行效果。我相信你已經(jīng)完全掌握了如何使用這些方法，并會(huì)逐漸加深對(duì)DOM技術(shù)的喜愛(ài)。因?yàn)椋珼OM技術(shù)確實(shí)簡(jiǎn)化了文檔對(duì)象的訪問(wèn)方式，為開發(fā)人員在對(duì)象層次上操縱文檔提供了最便捷的手段。
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
動(dòng)態(tài)的創(chuàng)建客戶端控件[收藏網(wǎng)絡(luò)]
14.3　XML數(shù)據(jù)島操作XML
HTML DOM 簡(jiǎn)要筆記
javascript
Javascript 在瀏覽器環(huán)境中 (四) DOM節(jié)點(diǎn)的創(chuàng)建,修改與刪除
13個(gè)需要知道的方法：使用 JavaScript 來(lái)操作 DOM
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服