使用DOM技术操纵文档

AvengerBevis

浏览: 42143 次
性别:
来自: Beijing

最近访客更多访客>>

暴风雨和海的故事

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2007-04 ( 9)
更多存档...

博客分类：

I'm coding

dom

java 代码

[资料]JS使用DOM技术操纵文档 -- 创亿无限|创意无限|创意| -- 编程爱好者BLOG
JavaScript高级应用：使用DOM技术操纵文档
我们知道，如果使用DHTML对象模型对文档的内容进行操纵，就必须了解相关文档元素的特殊属性和方法。因为文档的元素有很多种，相应的属性和方法也就非常多，为了实现一个功能，开发人员不得不查询许多资料。但是有了DOM技术，一切变得简单起来，那些操纵文档内容的属性和方法具备了元素无关性（element-independent）特点，这使得我们能够按照相同的步骤操纵文档内容。毋庸置疑，DOM技术为开发人员在对象层次上操纵文档提供了最便捷的手段。
本文就为你全面介绍在JavaScript中如何使用DOM属性和方法操纵文档内容。
使用data、nodeValue和src属性
DOM提供了2个属性用于修改文本节点的内容，它们是data和nodeVaule。2个属性实现的功能相同，语法是：object.data="new
value"或者object.nodeVaule="new
value"，其中object代表页面中的文本项节点。如果修改图形文件的内容，语法是：object.src=../../"new
value"，其中object表示页面中的img标记节点。来看看下面的例子：
＜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(
"页面初始状态" + "\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属性进行赋值修改图形的内容。点击这里运行这个实例。
JavaScript高级应用：使用DOM技术操纵文档
使用createElement方法
createElement方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点，而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记，比如＜
P＞、＜ FONT＞和＜ TABLE＞。CreateElement的语法为document.createElement(HTMLTag)，HTMLTag表示要创建的HTML标记，返回值是创建的孤立HTML标记节点。来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
alert("页面初始状态");
tableObj = document.createElement("TABLE");
tbodyObj = document.createElement("TBODY");
trObj = document.createElement("TR");
tdObj = document.createElement("TD");
alert(
"对页面内容进行修改后" + "\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＞
上述代码在文档中创建了4个孤立HTML标记节点tableObj、tbodyObj、trObj和tdObj，它们就象太空中4颗人造卫星一样，彼此间以及和文档中的现有节点间都互不关联。创建孤立节点的目的不是为了让它真正孤立，随后我们会介绍如何将创建的孤立节点彼此相连，并添加到文档的DOM
Tree结构中。点击这里运行这个实例。
使用createTextNode方法
createTextNode方法的功能与creatElement方法几乎相同，唯一不同的就是它是在文档中创建一个孤立文本项节点，这个孤立节点的唯一信息就是它所代表的字符串值。createTextNode的语法为document.
createTextNode (string)，string表示要创建的文本项内容，返回值是创建的孤立文本项节点。来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
alert("页面初始状态");
row1cell1Obj = document.createTextNode("This is row 1, cell 1");
row1cell2Obj = document.createTextNode("This is row 1, cell 2");
row2cell1Obj = document.createTextNode("This is row 2, cell 1");
row2cell2Obj = document.createTextNode("This is row 2, cell 2");
row3cell1Obj = document.createTextNode("This is row 3, cell 1");
row3cell2Obj = document.createTextNode("This is row 3, cell 2");
alert(
"对页面内容进行修改后" + "\n" +
"row1cell1Obj.firstchild = " + row1cell1Obj.firstChild + "\n" +
"row1cell1Obj.nodeName = " + row1cell1Obj
);
// --＞
＜/SCRIPT＞＜/BODY＞＜/HTML＞
上述代码在文档中创建了6个孤立文本项节点，它们表示一个3行2列大小Table的单元格内容。点击这里运行这个实例。
JavaScript高级应用：使用DOM技术操纵文档
使用cloneNode方法
cloneNode方法的功能是通过克隆（也就是复制）文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型，新创建的孤立节点或者是HTML标记节点，或者是包含字符串信息的文本项节点。cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true)，oldNode表示被克隆的节点，返回值是新创建的节点，false表示仅仅克隆oldNode，true表示克隆oldNode并包含其下属节点。来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
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分别为不同单元格赋值。
点击这里运行这个实例。
JavaScript高级应用：使用DOM技术操纵文档
使用appendChild方法
appendChild方法的功能是在2个节点间建立起父子关系，如果作为父亲的节点已经具有了孩子节点，那么新添加的孩子节点被追加为最后一个孩子，也就是lastChild。appendChild的语法是fatherObj.appendChild(childObj)，返回值是被追加的孩子节点。来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
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装载进文档中。点击这里运行这个实例
JavaScript高级应用：使用DOM技术操纵文档
使用applyElement方法
applyElement方法的功能是将一个节点与它的孩子节点和父亲节点脱离，然后将另外一个节点连接到这个节点，最终使它们成为父子关系。applyElement的语法是childObj.applyElement(fatherObj)，返回值是被连接的孩子节点。
我们注意到，applyElement和appendChild实现的目的基本相同，都是在2个节点间建立父子关系，但有2个区别：
1、applyElement方法只能操纵HTML标记节点，不能处理文本项节点。appendNode则能处理2种节点。
2、appendNode对2个节点的连接方式是从父到子，applyElement则是从子到父。
来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
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装载进文档中。点击这里运行这个实例。
JavaScript高级应用：使用DOM技术操纵文档
使用insertBefore方法
insertBefore方法的功能和appendChild相似，都是将一个孩子节点连接到一个父亲节点，但insertBefore方法允许我们指定孩子节点的位置。insertBefore的语法是fatherObj.insertBefore(childObj,
brotherObj)，返回值是被连接的孩子节点。执行后，childObj的位置在brotherObj之前。来看看下面的例子：
＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞
＜BODY ID="bodyNode"＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
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）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。来看看下面的例子：
＜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[i].nodeName = " +
bodyNode.childNodes[i].nodeName + "\n";
}
alert(msg);

分享到：

developer Works 最受欢迎的 Ajax 文章和教 ... | Velocity手册

2007-04-10 10:29
浏览 2209
评论(5)
论坛回复 / 浏览 (5 / 2687)
分类:Web前端
查看更多

5 楼 xms_999 2007-07-18

谢谢分享

4 楼 hexiaodong 2007-04-10

qmei 写道

利用XMLDOM技术做的开源的web打印控件 www.fcsoft.com.cn/ePrint.htm

你们的打印控件（ocx）还可以，不过不喜欢其中的htc控件。所以单据打印和报表打印，我是自己写的js控件

3 楼 knight 2007-04-10

http://knight.iteye.com/admin/show/44413
这里就有手册可以下载了。。。

2 楼 cozone_柯中 2007-04-10

麻烦你给个demo吧,这么大篇幅的代码,看的头疼

1 楼 AvengerBevis 2007-04-10

<div class='code_title'>java 代码</div>
<div class='dp-highlighter'>
<div class='bar'> </div>
<ol class='dp-j' start='1'>
 <li class='alt'>} </li>
 <li class=''> </li>
 <li class='alt'>msg="页面初始状态" + "\n\n" </li>
 <li class=''> </li>
 <li class='alt'>printChildren(); </li>
 <li class=''> </li>
 <li class='alt'>msg="对页面内容进行修改后" + "\n\n" </li>
 <li class=''> </li>
 <li class='alt'>msg += "Deleting Paragraph 3\n"; </li>
 <li class=''> </li>
 <li class='alt'>var deletedNode = p3Node.removeNode(false); </li>
 <li class=''> </li>
 <li class='alt'>msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n"; </li>
 <li class=''> </li>
 <li class='alt'>msg += "deletedNode.childNodes.length = " + </li>
 <li class=''>deletedNode.childNodes.length + "\n"; </li>
 <li class='alt'> </li>
 <li class=''>printChildren(); </li>
 <li class='alt'> </li>
 <li class=''>// --＞ </li>
 <li class='alt'> </li>
 <li class=''>＜/SCRIPT＞＜/BODY＞＜/HTML＞ </li>
 <li class='alt'> </li>
 <li class=''>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后仅仅删除p3Node。删除p3Node前，bodyNode有6个孩子节点，p3Node有4个孩子节点。删除p3Node后，节点p3Node的4个孩子节点提升为bodyNode的孩子节点，这样bodyNode就有了9个节点。p3Node被删除后返回值为deletedNode，它的nodeName属性值为P，孩子节点数为0，也就是说，它成为一个孤立节点。点击这里运行这个实例。 </li>
 <li class='alt'> </li>
 <li class=''> </li>
 <li class='alt'>现在我们将上述代码中的deletedNode = p3Node.removeNode(false)修改为deletedNode = </li>
 <li class=''>p3Node.removeNode(true)，你会看到，删除p3Node后，bodyNode的孩子节点数变为5。点击这里看看实际效果。 </li>
 <li class='alt'> </li>
 <li class=''>JavaScript高级应用：使用DOM技术操纵文档 </li>
 <li class='alt'>使用replaceNode方法 </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''>replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点，语法为oldNode.replaceNode(newNode)，返回值是被替换的节点。来看看下面的例子： </li>
 <li class='alt'> </li>
 <li class=''> </li>
 <li class='alt'>＜HTML＞＜HEAD＞＜TITLE＞ DOM Demo ＜/title＞＜/HEAD＞ </li>
 <li class=''> </li>
 <li class='alt'>＜BODY ID="bodyNode"＞ </li>
 <li class=''> </li>
 <li class='alt'>This is the document body </li>
 <li class=''> </li>
 <li class='alt'>＜P ID = "p1Node"＞This is paragraph 1.＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜P ID = "p2Node"＞This is paragraph 2.＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜P ID = "p3Node"＞This is paragraph 3. </li>
 <li class=''> </li>
 <li class='alt'>＜IMG ID = "imgNode" SRC="myexam.gif"＞This text follows the image </li>
 <li class=''> </li>
 <li class='alt'>＜TABLE ID="tableNode"＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TR＞＜TD BGCOLOR=yellow＞This is row 1, cell 1＜/TD＞＜TD </li>
 <li class=''>BGCOLOR=orange＞This is row 1, cell 2＜/TD＞＜/TR＞ </li>
 <li class='alt'> </li>
 <li class=''>＜TR＞＜TD BGCOLOR=red＞This is row 2, cell 1＜/TD＞＜TD BGCOLOR=magenta＞This </li>
 <li class='alt'>is row 2, cell 2＜/TD＞＜/TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TR＞＜TD BGCOLOR=lightgreen＞This is row 3, cell 1＜/TD＞＜TD </li>
 <li class=''>BGCOLOR=beige＞This is row 3, cell 2＜/TD＞＜/TR＞ </li>
 <li class='alt'> </li>
 <li class=''>＜/TABLE＞ </li>
 <li class='alt'> </li>
 <li class=''>＜/P＞ </li>
 <li class='alt'> </li>
 <li class=''>＜P ID = "p4Node"＞This is paragraph 4.＜/P＞ </li>
 <li class='alt'> </li>
 <li class=''>＜SCRIPT LANGUAGE="JavaScript"＞ </li>
 <li class='alt'> </li>
 <li class=''>＜!-- </li>
 <li class='alt'> </li>
 <li class=''>var msg = ""; </li>
 <li class='alt'> </li>
 <li class=''>function printChildren() { </li>
 <li class='alt'> </li>
 <li class=''>childCount = bodyNode.childNodes.length; </li>
 <li class='alt'> </li>
 <li class=''>msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ; </li>
 <li class='alt'> </li>
 <li class=''>for(var i = 0; i ＜ childCount; i++) { </li>
 <li class='alt'> </li>
 <li class=''>msg += "bodyNode.childNodes[i].nodeName = " + </li>
 <li class='alt'>bodyNode.childNodes[i].nodeName + "\n"; </li>
 <li class=''> </li>
 <li class='alt'>} </li>
 <li class=''> </li>
 <li class='alt'>alert(msg); </li>
 <li class=''> </li>
 <li class='alt'>} </li>
 <li class=''> </li>
 <li class='alt'>msg="页面初始状态" + "\n\n" </li>
 <li class=''> </li>
 <li class='alt'>printChildren(); </li>
 <li class=''> </li>
 <li class='alt'>msg="对页面内容进行修改后" + "\n\n" </li>
 <li class=''> </li>
 <li class='alt'>msg += "Replacing Paragraph 3\n"; </li>
 <li class=''> </li>
 <li class='alt'>var b = document.createTextNode("New Body Page"); </li>
 <li class=''> </li>
 <li class='alt'>var replacedNode = p3Node.replaceNode(b); </li>
 <li class=''> </li>
 <li class='alt'>msg += "replacedNode.nodeName = " + replacedNode.nodeName + "\n"; </li>
 <li class=''> </li>
 <li class='alt'>msg += "replacedNode.childNodes.length = " + </li>
 <li class=''>replacedNode.childNodes.length + "\n"; </li>
 <li class='alt'> </li>
 <li class=''>msg += "p2Node.nodeName = " + p2Node.nodeName + "\n"; </li>
 <li class='alt'> </li>
 <li class=''>printChildren(); </li>
 <li class='alt'> </li>
 <li class=''>// --＞ </li>
 <li class='alt'> </li>
 <li class=''>＜/SCRIPT＞＜/BODY＞＜/HTML＞ </li>
 <li class='alt'> </li>
 <li class=''>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后用新创建的文本项节点替换p3Node。替换后，bodyNode的孩子节点数目没有变，原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node，它仍包含原来的4个孩子节点。点击这里运行这个实例。 </li>
 <li class='alt'> </li>
 <li class=''> </li>
 <li class='alt'>replaceNode方法的另一个功能是删除节点及其下属节点，就象前面介绍的removeNode（true）一样。这时，我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在，我们将上述代码中的b </li>
 <li class=''>= document.createTextNode("New Body Page")修改为b = </li>
 <li class='alt'>p2Node，你会看到，p3Node及其下属节点被删除了，没有替换节点生成，bodyNode的孩子节点数变为5。点击这里看看实际效果。 </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''>如果replaceNode方法的参数为空，也就是执行replaceNode（），那么将导致浏览器脚本运行错误。 </li>
 <li class='alt'> </li>
 <li class=''>JavaScript高级应用：使用DOM技术操纵文档 </li>
 <li class='alt'>使用swapNode方法 </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''>swapNode方法的功能是交换2个节点（包括其下属节点）在文档Tree中的位置，语法为firstNode.swapNode(secondNode)，返回值是节点firstNode。来看看下面的例子： </li>
 <li class='alt'> </li>
 <li class=''> </li>
 <li class='alt'>＜HTML＞＜HEAD＞＜TITLE＞DOM Demo＜/TITLE＞＜/HEAD＞ </li>
 <li class=''> </li>
 <li class='alt'>＜BODY id=bodyNode＞This is the document body </li>
 <li class=''> </li>
 <li class='alt'>＜P id=p1Node＞This is paragraph 1.＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜P id=p2Node＞This is paragraph 2.＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜P id=p3Node＞This is paragraph 3. ＜IMG id=imgNode </li>
 <li class=''> </li>
 <li class='alt'>src="myexam.gif"＞This text follows the image </li>
 <li class=''> </li>
 <li class='alt'>＜TABLE id=tableNode＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TBODY＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=yellow＞This is row 1, cell 1＜/TD＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=orange＞This is row 1, cell 2＜/TD＞＜/TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=red＞This is row 2, cell 1＜/TD＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=magenta＞This is row 2, cell 2＜/TD＞＜/TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TR＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=lightgreen＞This is row 3, cell 1＜/TD＞ </li>
 <li class=''> </li>
 <li class='alt'>＜TD bgColor=beige＞This is row 3, cell 2＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜P id=p4Node＞This is paragraph 4.＜/P＞ </li>
 <li class=''> </li>
 <li class='alt'>＜SCRIPT language=JavaScript＞ </li>
 <li class=''> </li>
 <li class='alt'>＜!-- </li>
 <li class=''> </li>
 <li class='alt'>var msg = ""; </li>
 <li class=''> </li>
 <li class='alt'>function printChildren() { </li>
 <li class=''> </li>
 <li class='alt'>childCount = bodyNode.childNodes.length; </li>
 <li class=''> </li>
 <li class='alt'>msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ; </li>
 <li class=''> </li>
 <li class='alt'>for(var i = 0; i ＜ childCount; i++) { </li>
 <li class=''> </li>
 <li class='alt'>msg += "bodyNode.childNodes[i].nodeName = " + </li>
 <li class=''>bodyNode.childNodes[i].nodeName + "\n"; </li>
 <li class='alt'> </li>
 <li class=''>} </li>
 <li class='alt'> </li>
 <li class=''>alert(msg); </li>
 <li class='alt'> </li>
 <li class=''>} </li>
 <li class='alt'> </li>
 <li class=''>msg="页面初始状态" + "\n\n" </li>
 <li class='alt'> </li>
 <li class=''>printChildren(); </li>
 <li class='alt'> </li>
 <li class=''>msg="对页面内容进行修改后" + "\n\n" </li>
 <li class='alt'> </li>
 <li class=''>msg += "Swapping Paragraph 3 with Paragraph 2\n"; </li>
 <li class='alt'> </li>
 <li class=''>var b = p2Node; </li>
 <li class='alt'> </li>
 <li class=''>var swappedNode = p3Node.swapNode(b); </li>
 <li class='alt'> </li>
 <li class=''>msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n"; </li>
 <li class='alt'> </li>
 <li class=''>msg += "swappedNode.childNodes.length = " + </li>
 <li class='alt'>swappedNode.childNodes.length + "\n"; </li>
 <li class=''> </li>
 <li class='alt'>msg += "p2Node.nodeName = " + p2Node.nodeName + "\n"; </li>
 <li class=''> </li>
 <li class='alt'>printChildren(); </li>
 <li class=''> </li>
 <li class='alt'>// --＞ </li>
 <li class=''> </li>
 <li class='alt'>＜/SCRIPT＞＜/BODY＞＜/HTML＞ </li>
 <li class=''> </li>
 <li class='alt'>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值，然后交换p3Node和p2Node的位置。交换后，bodyNode的孩子节点数目没有变，变量swappedNode表示p3Node，它仍包含原来的4个孩子节点。点击这里运行这个实例。 </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''>swapNode方法的另一个功能是替换节点及其下属节点，就象前面介绍的replaceNode方法一样。这时，我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在，我们将上述代码中的b </li>
 <li class='alt'>= p2Node修改为b = document.createTextNode("This is a swapped in </li>
 <li class=''>text")，你会看到，p3Node及其下属节点被新创建的文本项节点所替换，原来的节点类型P变为了文本项节点类型#text。点击这里看看实际效果。 </li>
 <li class='alt'> </li>
 <li class=''> </li>
 <li class='alt'>结语 </li>
 <li class=''> </li>
 <li class='alt'> </li>
 <li class=''>以上我们详细讲解了JavaScript语言中在层次关系上操纵对象的各种DOM属性和方法原理，并且配以例程演示了实际的运行效果。我相信你已经完全掌握了如何使用这些方法，并会逐渐加深对DOM技术的喜爱。因为，DOM技术确实简化了文档对象的访问方式，为开发人员在对象层次上操纵文档提供了最便捷的手段。 </li>
</ol>
</div>

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论