- 浏览: 42171 次
- 性别:
- 来自: Beijing
文章分类
最新评论
-
xwsoft:
Spring中文开发手册下载 -
zhengbin917943:
谢了~~
Spring中文开发手册下载 -
steed_ns:
谢了分享~~~~~~~
Spring中文开发手册下载 -
xms_999:
谢谢分享
使用DOM技术操纵文档 -
samuelyuan:
垃圾,严重鄙视抄袭!
Guice 1.0 手册 (附带一类似HelloWorld例子)
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);
评论
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'><span><span>} </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"Deleting Paragraph 3\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var deletedNode = p3Node.removeNode(<span class='keyword'>false</span><span>); </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"deletedNode.nodeName = "</span><span> + deletedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"deletedNode.childNodes.length = "</span><span> + </span></span></li>
<li class=''><span>deletedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='comment'>// --></span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></SCRIPT></BODY></HTML> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后仅仅删除p3Node。删除p3Node前,bodyNode有<span class='number'>6</span><span>个孩子节点,p3Node有</span><span class='number'>4</span><span>个孩子节点。删除p3Node后,节点p3Node的</span><span class='number'>4</span><span>个孩子节点提升为bodyNode的孩子节点,这样bodyNode就有了</span><span class='number'>9</span><span>个节点。p3Node被删除后返回值为deletedNode,它的nodeName属性值为P,孩子节点数为</span><span class='number'>0</span><span>,也就是说,它成为一个孤立节点。点击这里运行这个实例。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>现在我们将上述代码中的deletedNode = p3Node.removeNode(<span class='keyword'>false</span><span>)修改为deletedNode = </span></span></li>
<li class=''><span>p3Node.removeNode(<span class='keyword'>true</span><span>),你会看到,删除p3Node后,bodyNode的孩子节点数变为</span><span class='number'>5</span><span>。点击这里看看实际效果。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>JavaScript高级应用:使用DOM技术操纵文档 </span></li>
<li class='alt'><span>使用replaceNode方法 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。来看看下面的例子: </span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><HTML><HEAD><TITLE> DOM Demo </title></HEAD> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><BODY ID=<span class='string'>"bodyNode"</span><span>> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>This is the document body </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p1Node"</span><span>>This is paragraph </span><span class='number'>1</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p2Node"</span><span>>This is paragraph </span><span class='number'>2</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p3Node"</span><span>>This is paragraph </span><span class='number'>3</span><span>. </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><IMG ID = <span class='string'>"imgNode"</span><span> SRC=</span><span class='string'>"myexam.gif"</span><span>>This text follows the image </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TABLE ID=<span class='string'>"tableNode"</span><span>> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR><TD BGCOLOR=yellow>This is row <span class='number'>1</span><span>, cell </span><span class='number'>1</span><span></TD><TD </span></span></li>
<li class=''><span>BGCOLOR=orange>This is row <span class='number'>1</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><TR><TD BGCOLOR=red>This is row <span class='number'>2</span><span>, cell </span><span class='number'>1</span><span></TD><TD BGCOLOR=magenta>This </span></span></li>
<li class='alt'><span>is row <span class='number'>2</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR><TD BGCOLOR=lightgreen>This is row <span class='number'>3</span><span>, cell </span><span class='number'>1</span><span></TD><TD </span></span></li>
<li class=''><span>BGCOLOR=beige>This is row <span class='number'>3</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></TABLE> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span></P> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><P ID = <span class='string'>"p4Node"</span><span>>This is paragraph </span><span class='number'>4</span><span>.</P> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><SCRIPT LANGUAGE=<span class='string'>"JavaScript"</span><span>> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><!-- </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var msg = <span class='string'>""</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>function printChildren() { </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>childCount = bodyNode.childNodes.length; </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"bodyNode.childNodes.length = "</span><span> + bodyNode.childNodes.length + </span><span class='string'>"\n"</span><span> ; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='keyword'>for</span><span>(var i = </span><span class='number'>0</span><span>; i < childCount; i++) { </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"bodyNode.childNodes[i].nodeName = "</span><span> + </span></span></li>
<li class='alt'><span>bodyNode.childNodes[i].nodeName + <span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>} </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>alert(msg); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>} </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"Replacing Paragraph 3\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var b = document.createTextNode(<span class='string'>"New Body Page"</span><span>); </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var replacedNode = p3Node.replaceNode(b); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"replacedNode.nodeName = "</span><span> + replacedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"replacedNode.childNodes.length = "</span><span> + </span></span></li>
<li class=''><span>replacedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"p2Node.nodeName = "</span><span> + p2Node.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='comment'>// --></span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></SCRIPT></BODY></HTML> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后用新创建的文本项节点替换p3Node。替换后,bodyNode的孩子节点数目没有变,原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node,它仍包含原来的<span class='number'>4</span><span>个孩子节点。点击这里运行这个实例。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>replaceNode方法的另一个功能是删除节点及其下属节点,就象前面介绍的removeNode(<span class='keyword'>true</span><span>)一样。这时,我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在,我们将上述代码中的b </span></span></li>
<li class=''><span>= document.createTextNode(<span class='string'>"New Body Page"</span><span>)修改为b = </span></span></li>
<li class='alt'><span>p2Node,你会看到,p3Node及其下属节点被删除了,没有替换节点生成,bodyNode的孩子节点数变为<span class='number'>5</span><span>。点击这里看看实际效果。 </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>如果replaceNode方法的参数为空,也就是执行replaceNode(),那么将导致浏览器脚本运行错误。 </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>JavaScript高级应用:使用DOM技术操纵文档 </span></li>
<li class='alt'><span>使用swapNode方法 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>swapNode方法的功能是交换<span class='number'>2</span><span>个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。来看看下面的例子: </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><BODY id=bodyNode>This is the document body </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p1Node>This is paragraph <span class='number'>1</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p2Node>This is paragraph <span class='number'>2</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p3Node>This is paragraph <span class='number'>3</span><span>. <IMG id=imgNode </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>src=<span class='string'>"myexam.gif"</span><span>>This text follows the image </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TABLE id=tableNode> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TBODY> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=yellow>This is row <span class='number'>1</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=orange>This is row <span class='number'>1</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=red>This is row <span class='number'>2</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=magenta>This is row <span class='number'>2</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=lightgreen>This is row <span class='number'>3</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=beige>This is row <span class='number'>3</span><span>, cell </span><span class='number'>2</span><span></TD></TR></TBODY></TABLE></P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p4Node>This is paragraph <span class='number'>4</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><SCRIPT language=JavaScript> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><!-- </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var msg = <span class='string'>""</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>function printChildren() { </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>childCount = bodyNode.childNodes.length; </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"bodyNode.childNodes.length = "</span><span> + bodyNode.childNodes.length + </span><span class='string'>"\n"</span><span> ; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><span class='keyword'>for</span><span>(var i = </span><span class='number'>0</span><span>; i < childCount; i++) { </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"bodyNode.childNodes[i].nodeName = "</span><span> + </span></span></li>
<li class=''><span>bodyNode.childNodes[i].nodeName + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>} </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>alert(msg); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>} </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"Swapping Paragraph 3 with Paragraph 2\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var b = p2Node; </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var swappedNode = p3Node.swapNode(b); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"swappedNode.nodeName = "</span><span> + swappedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"swappedNode.childNodes.length = "</span><span> + </span></span></li>
<li class='alt'><span>swappedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"p2Node.nodeName = "</span><span> + p2Node.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><span class='comment'>// --></span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span></SCRIPT></BODY></HTML> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后交换p3Node和p2Node的位置。交换后,bodyNode的孩子节点数目没有变,变量swappedNode表示p3Node,它仍包含原来的<span class='number'>4</span><span>个孩子节点。点击这里运行这个实例。 </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>swapNode方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在,我们将上述代码中的b </span></li>
<li class='alt'><span>= p2Node修改为b = document.createTextNode(<span class='string'>"This is a swapped in</span> </span></li>
<li class=''><span><span class='string'>text"</span><span>),你会看到,p3Node及其下属节点被新创建的文本项节点所替换,原来的节点类型P变为了文本项节点类型#text。点击这里看看实际效果。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>结 语 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>以上我们详细讲解了JavaScript语言中在层次关系上操纵对象的各种DOM属性和方法原理,并且配以例程演示了实际的运行效果。我相信你已经完全掌握了如何使用这些方法,并会逐渐加深对DOM技术的喜爱。因为,DOM技术确实简化了文档对象的访问方式,为开发人员在对象层次上操纵文档提供了最便捷的手段。 </span></li>
</ol>
</div>
<div class='dp-highlighter'>
<div class='bar'> </div>
<ol class='dp-j' start='1'>
<li class='alt'><span><span>} </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"Deleting Paragraph 3\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var deletedNode = p3Node.removeNode(<span class='keyword'>false</span><span>); </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"deletedNode.nodeName = "</span><span> + deletedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"deletedNode.childNodes.length = "</span><span> + </span></span></li>
<li class=''><span>deletedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='comment'>// --></span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></SCRIPT></BODY></HTML> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后仅仅删除p3Node。删除p3Node前,bodyNode有<span class='number'>6</span><span>个孩子节点,p3Node有</span><span class='number'>4</span><span>个孩子节点。删除p3Node后,节点p3Node的</span><span class='number'>4</span><span>个孩子节点提升为bodyNode的孩子节点,这样bodyNode就有了</span><span class='number'>9</span><span>个节点。p3Node被删除后返回值为deletedNode,它的nodeName属性值为P,孩子节点数为</span><span class='number'>0</span><span>,也就是说,它成为一个孤立节点。点击这里运行这个实例。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>现在我们将上述代码中的deletedNode = p3Node.removeNode(<span class='keyword'>false</span><span>)修改为deletedNode = </span></span></li>
<li class=''><span>p3Node.removeNode(<span class='keyword'>true</span><span>),你会看到,删除p3Node后,bodyNode的孩子节点数变为</span><span class='number'>5</span><span>。点击这里看看实际效果。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>JavaScript高级应用:使用DOM技术操纵文档 </span></li>
<li class='alt'><span>使用replaceNode方法 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。来看看下面的例子: </span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><HTML><HEAD><TITLE> DOM Demo </title></HEAD> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><BODY ID=<span class='string'>"bodyNode"</span><span>> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>This is the document body </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p1Node"</span><span>>This is paragraph </span><span class='number'>1</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p2Node"</span><span>>This is paragraph </span><span class='number'>2</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P ID = <span class='string'>"p3Node"</span><span>>This is paragraph </span><span class='number'>3</span><span>. </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><IMG ID = <span class='string'>"imgNode"</span><span> SRC=</span><span class='string'>"myexam.gif"</span><span>>This text follows the image </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TABLE ID=<span class='string'>"tableNode"</span><span>> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR><TD BGCOLOR=yellow>This is row <span class='number'>1</span><span>, cell </span><span class='number'>1</span><span></TD><TD </span></span></li>
<li class=''><span>BGCOLOR=orange>This is row <span class='number'>1</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><TR><TD BGCOLOR=red>This is row <span class='number'>2</span><span>, cell </span><span class='number'>1</span><span></TD><TD BGCOLOR=magenta>This </span></span></li>
<li class='alt'><span>is row <span class='number'>2</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR><TD BGCOLOR=lightgreen>This is row <span class='number'>3</span><span>, cell </span><span class='number'>1</span><span></TD><TD </span></span></li>
<li class=''><span>BGCOLOR=beige>This is row <span class='number'>3</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></TABLE> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span></P> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><P ID = <span class='string'>"p4Node"</span><span>>This is paragraph </span><span class='number'>4</span><span>.</P> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><SCRIPT LANGUAGE=<span class='string'>"JavaScript"</span><span>> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><!-- </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var msg = <span class='string'>""</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>function printChildren() { </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>childCount = bodyNode.childNodes.length; </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"bodyNode.childNodes.length = "</span><span> + bodyNode.childNodes.length + </span><span class='string'>"\n"</span><span> ; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='keyword'>for</span><span>(var i = </span><span class='number'>0</span><span>; i < childCount; i++) { </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"bodyNode.childNodes[i].nodeName = "</span><span> + </span></span></li>
<li class='alt'><span>bodyNode.childNodes[i].nodeName + <span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>} </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>alert(msg); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>} </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"Replacing Paragraph 3\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var b = document.createTextNode(<span class='string'>"New Body Page"</span><span>); </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var replacedNode = p3Node.replaceNode(b); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"replacedNode.nodeName = "</span><span> + replacedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"replacedNode.childNodes.length = "</span><span> + </span></span></li>
<li class=''><span>replacedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"p2Node.nodeName = "</span><span> + p2Node.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span><span class='comment'>// --></span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span></SCRIPT></BODY></HTML> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后用新创建的文本项节点替换p3Node。替换后,bodyNode的孩子节点数目没有变,原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node,它仍包含原来的<span class='number'>4</span><span>个孩子节点。点击这里运行这个实例。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>replaceNode方法的另一个功能是删除节点及其下属节点,就象前面介绍的removeNode(<span class='keyword'>true</span><span>)一样。这时,我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在,我们将上述代码中的b </span></span></li>
<li class=''><span>= document.createTextNode(<span class='string'>"New Body Page"</span><span>)修改为b = </span></span></li>
<li class='alt'><span>p2Node,你会看到,p3Node及其下属节点被删除了,没有替换节点生成,bodyNode的孩子节点数变为<span class='number'>5</span><span>。点击这里看看实际效果。 </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>如果replaceNode方法的参数为空,也就是执行replaceNode(),那么将导致浏览器脚本运行错误。 </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>JavaScript高级应用:使用DOM技术操纵文档 </span></li>
<li class='alt'><span>使用swapNode方法 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>swapNode方法的功能是交换<span class='number'>2</span><span>个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。来看看下面的例子: </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><BODY id=bodyNode>This is the document body </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p1Node>This is paragraph <span class='number'>1</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p2Node>This is paragraph <span class='number'>2</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p3Node>This is paragraph <span class='number'>3</span><span>. <IMG id=imgNode </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>src=<span class='string'>"myexam.gif"</span><span>>This text follows the image </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TABLE id=tableNode> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TBODY> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=yellow>This is row <span class='number'>1</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=orange>This is row <span class='number'>1</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=red>This is row <span class='number'>2</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=magenta>This is row <span class='number'>2</span><span>, cell </span><span class='number'>2</span><span></TD></TR> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TR> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=lightgreen>This is row <span class='number'>3</span><span>, cell </span><span class='number'>1</span><span></TD> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><TD bgColor=beige>This is row <span class='number'>3</span><span>, cell </span><span class='number'>2</span><span></TD></TR></TBODY></TABLE></P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><P id=p4Node>This is paragraph <span class='number'>4</span><span>.</P> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><SCRIPT language=JavaScript> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><!-- </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>var msg = <span class='string'>""</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>function printChildren() { </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>childCount = bodyNode.childNodes.length; </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"bodyNode.childNodes.length = "</span><span> + bodyNode.childNodes.length + </span><span class='string'>"\n"</span><span> ; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span><span class='keyword'>for</span><span>(var i = </span><span class='number'>0</span><span>; i < childCount; i++) { </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"bodyNode.childNodes[i].nodeName = "</span><span> + </span></span></li>
<li class=''><span>bodyNode.childNodes[i].nodeName + <span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>} </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>alert(msg); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>} </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg=<span class='string'>"页面初始状态"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>printChildren(); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg=<span class='string'>"对页面内容进行修改后"</span><span> + </span><span class='string'>"\n\n"</span><span> </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"Swapping Paragraph 3 with Paragraph 2\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var b = p2Node; </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>var swappedNode = p3Node.swapNode(b); </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"swappedNode.nodeName = "</span><span> + swappedNode.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span>msg += <span class='string'>"swappedNode.childNodes.length = "</span><span> + </span></span></li>
<li class='alt'><span>swappedNode.childNodes.length + <span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>msg += <span class='string'>"p2Node.nodeName = "</span><span> + p2Node.nodeName + </span><span class='string'>"\n"</span><span>; </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span>printChildren(); </span></li>
<li class=''><span> </span></li>
<li class='alt'><span><span class='comment'>// --></span><span> </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span></SCRIPT></BODY></HTML> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后交换p3Node和p2Node的位置。交换后,bodyNode的孩子节点数目没有变,变量swappedNode表示p3Node,它仍包含原来的<span class='number'>4</span><span>个孩子节点。点击这里运行这个实例。 </span></span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>swapNode方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在,我们将上述代码中的b </span></li>
<li class='alt'><span>= p2Node修改为b = document.createTextNode(<span class='string'>"This is a swapped in</span> </span></li>
<li class=''><span><span class='string'>text"</span><span>),你会看到,p3Node及其下属节点被新创建的文本项节点所替换,原来的节点类型P变为了文本项节点类型#text。点击这里看看实际效果。 </span></span></li>
<li class='alt'><span> </span></li>
<li class=''><span> </span></li>
<li class='alt'><span>结 语 </span></li>
<li class=''><span> </span></li>
<li class='alt'><span> </span></li>
<li class=''><span>以上我们详细讲解了JavaScript语言中在层次关系上操纵对象的各种DOM属性和方法原理,并且配以例程演示了实际的运行效果。我相信你已经完全掌握了如何使用这些方法,并会逐渐加深对DOM技术的喜爱。因为,DOM技术确实简化了文档对象的访问方式,为开发人员在对象层次上操纵文档提供了最便捷的手段。 </span></li>
</ol>
</div>
相关推荐
文档对象模型是HTML和XML文档的编程接口...可以说,要自由的操纵XML文件,就要用到DOM规范。DOM文档中的逻辑结构可以用节点树的形式进行表述。通过对XML文件的解析处理,XML文件中的元素便转化为DOM文档中的节点对象。
DOM 为创建、处理和操纵 XML 文档提供了灵活和有效的方法,但使用起来可能比较困难并且可能导致不稳定和错误的代码。作者 Parand Tony Daruger 提供了一套 Java 用法模式和函数库,使 DOM 变得健壮且易于使用。
通常我们使用根据以下这些模型创建的API 来分析和操纵XML结构,这些模型可以是基于对象(基于树)的,如文档对象模型(Document Object Model,DOM);也可以是基于事件(基于流、推模型)的,如 Simple API for XML...
文档对象模型就是这样一个结构化文档编程接口,它定义了文档的逻辑结构以及访问和操纵文档的方法。使用 DOM 模型,程序员可以方便地创建文档、导航其结构,或增加、修改、删除、移动文档的任何成份。DOM 标准的出现...
DOM中有很多对象,其中一些是用户可以操纵的,如urI,location,refelter等。 客户端的脚本程序可以通过DOM动态地检查和修改页面内容,它不依赖于提交数据到服务器端,而从客户端获得DOM中的数据在本地执行。 DOM ...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在请求和响应中使用 XML 80 第 8 部分: 在请求和响应中使用 XML 87 第 9 部分: Web 2.0 用户界面技术 95 第 10 部分: 使用 JSON ...
使用DOM操作XML文档 XMLHttpRequest对象 XMLHttpRequest对象与Ajax XMLHttpRequest对象的属性和方法 Ajax编程 如何使用Ajax 初始化对象 指定响应处理函数 发出http请求 处理服务器返回的信息 一个初步的Ajax开发框架...
各种MDN DOM和Web API文档页面随附的代码示例。 “ abort-api”目录包含有关如何使用“ Abort API”(又名和 )的。 。 “ auxclick”目录包含一个演示新auxclick事件类型的简单示例。 有关更多详细信息,请参见 ...
文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第六章 案例研究:图像裁剪和缩放工具 6.1 测试文件 6.2...
文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第六章 案例研究:图像裁剪和缩放工具 6.1 测试文件 6.2...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
本文档对象模型允许访问所有的文档内容和...此外,这里是文档属性,可以使用W3C DOM访问列表: 文档方法在W3C DOM: 此模型支持所有传统DOM提供的方法。此外,这里是由W3C DOM支持的方法列表: 示例: 这是(访问
我创建了这个becaus vue-masonry-wall,这是一个纯vue响应式砌体实现,无需直接进行dom操纵,对ssr友好并带有延迟附加。 我之所以创建它,是因为其他库不支持SSR,并且我需要一个纯粹的vue实现。 实时演示:图像和源...
本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的概念——Web浏览器如何把网页看作一棵树,现在您应该理解了DOM中使用的编程结构。本期教程将把这些知识用于实践,建立一个简单的包含一些特殊效果的Web...
在本课程中,您将学习如何使用JavaScript使网页动态和交互式,以与文档对象模型连接以及影响和操纵页面元素。 文档对象模型是一个庞大的对象,代表您的页面元素及其属性。 JavaScript可以轻松地在DOM中选择对象,并...
为了能够操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就是“文档对象模型”。这些对象的组织类似一个树型结构,并表示一个Web文档的所有内容和组件。 注意:”文档对象模型”不是JavaScript语言的一...
页面的文档对象模型(DOM)的更改将保留,并使用通过进行的同步到同一页面的所有连接的客户端。 Webstrates可用于开发交互式软件,其中协作支持是规范而非例外。 转到以开始使用Webstrates,以获取用户指南和开发...
它提供一种简便的JavaScript设计模式, 优化HTML文档操作、事件处理、动画设计和Ajax交互。虽然现在的Vue、react框架风靡世界,但是目前也有不少的jQuery的开发者坚持使用jQuery。本课程主要是jQuery实战,主要讲解...