`
ghl116
  • 浏览: 160913 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript高级应用:使用DOM技术操纵文档(转载)

阅读更多

JavaScript高级应用:使用DOM技术操纵文档

JavaScript高级应用:使用DOM技术操纵文档 [第八色彩专业交友社区]
分类: Web开发:JavaScript
作者: 甘冀平
出处: http://www.enet.com.cn
阅读次数: 420

  我们知道,如果使用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属性进行赋值修改图形的内容。

使用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结构中。

使用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分别为不同单元格赋值。
使用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装载进文档中。

使用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 装载进文档中

使用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.nodeName = " + bodyNode.childNodes.nodeName + "\n";

}

alert(msg);

}

msg="页面初始状态" + "\n\n"

printChildren();



msg="对页面内容进行修改后" + "\n\n"

msg += "Deleting Paragraph 3\n";

var deletedNode = p3Node.removeNode(false);

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

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

printChildren();

// -->

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



上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后仅仅删除p3Node。删除p3Node前, bodyNode有6个孩子节点,p3Node有4个孩子节点。删除p3Node后,节点p3Node的4个孩子节点提升为bodyNode的孩子节点,这样bodyNode就有了9个节点。p3Node被删除后返回值为deletedNode,它的nodeName属性值为P,孩子节点数为0,也就是说,它成为一个孤立节点。

现在我们将上述代码中的deletedNode = p3Node.removeNode(false)修改为deletedNode = p3Node.removeNode(true),你会看到,删除p3Node后,bodyNode的孩子节点数变为5。
使用replaceNode方法


replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。来看看下面的例子:


<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="页面初始状态" + "\n\n"

printChildren();



msg="对页面内容进行修改后" + "\n\n"

msg += "Replacing Paragraph 3\n";

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

var replacedNode = p3Node.replaceNode(b);

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

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

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

printChildren();

// -->

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



上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后用新创建的文本项节点替换p3Node。替换后, bodyNode的孩子节点数目没有变,原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node,它仍包含原来的4个孩子节点。

replaceNode方法的另一个功能是删除节点及其下属节点,就象前面介绍的removeNode(true)一样。这时,我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在,我们将上述代码中的b = document.createTextNode("New Body Page")修改为b = p2Node,你会看到,p3Node及其下属节点被删除了,没有替换节点生成,bodyNode的孩子节点数变为5。

如果replaceNode方法的参数为空,也就是执行replaceNode(),那么将导致浏览器脚本运行错误。

使用swapNode方法


swapNode方法的功能是交换2个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。来看看下面的例子:


<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="页面初始状态" + "\n\n"

printChildren();



msg="对页面内容进行修改后" + "\n\n"

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

var b = p2Node;

var swappedNode = p3Node.swapNode(b);

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

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

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

printChildren();

// -->

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



上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后交换p3Node和p2Node的位置。交换后,bodyNode的孩子节点数目没有变,变量swappedNode表示p3Node,它仍包含原来的4个孩子节点。


swapNode 方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在,我们将上述代码中的b = p2Node修改为b = document.createTextNode("This is a swapped in text"),你会看到,p3Node及其下属节点被新创建的文本项节点所替换,原来的节点类型P变为了文本项节点类型#text。

结 语


以上我们详细讲解了JavaScript语言中在层次关系上操纵对象的各种DOM属性和方法原理,并且配以例程演示了实际的运行效果。我相信你已经完全掌握了如何使用这些方法,并会逐渐加深对DOM技术的喜爱。因为,DOM技术确实简化了文档对象的访问方式,为开发人员在对象层次上操纵文档提供了最便捷的手段。

 http://www.360doc.com/content/06/0720/16/5874_160730.shtml

分享到:
评论

相关推荐

    AJAX 学习资料WORD文档

    第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 第 4 部分: 利用 DOM 进行 Web 响应 40 第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在...

    Web应用安全:DOM型XSS.pptx

    DOM中有很多对象,其中一些是用户可以操纵的,如urI,location,refelter等。 客户端的脚本程序可以通过DOM动态地检查和修改页面内容,它不依赖于提交数据到服务器端,而从客户端获得DOM中的数据在本地执行。 DOM ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     9.2.3 操纵DOM文档   9.3 处理事件   9.3.1 注册事件   9.3.2 自定义事件   9.4 访问和操纵样式   9.5 通信   9.6 小结   第10章 添加效果增强用户体验   10.1 自己动手实现效果   ...

    JavaScript DOM高级程序设计 Part I

    JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...

    JavaScript DOM高级程序设计 Part II

    JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     9.2.3 操纵DOM文档   9.3 处理事件   9.3.1 注册事件   9.3.2 自定义事件   9.4 访问和操纵样式   9.5 通信   9.6 小结   第10章 添加效果增强用户体验   10.1 自己动手实现效果   ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     9.2.3 操纵DOM文档   9.3 处理事件   9.3.1 注册事件   9.3.2 自定义事件   9.4 访问和操纵样式   9.5 通信   9.6 小结   第10章 添加效果增强用户体验   10.1 自己动手实现效果   ...

    掌握Ajax系列6:建立基于DOM的Web应用程序

    本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的...本期教程将把这些知识用于实践,建立一个简单的包含一些特殊效果的Web页面,所有这些都使用JavaScript操纵DOM来创建,不需要重新加载或者刷新页面。

    JavaScript-DOM---Interactive-and-Dynamic-[removed]JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布

    在本课程中,您将学习如何使用JavaScript使网页动态和交互式,以与文档对象模型连接以及影响和操纵页面元素。 文档对象模型是一个庞大的对象,代表您的页面元素及其属性。 JavaScript可以轻松地在DOM中选择对象,并...

    北京中科信软AJAX培训

    使用DOM操作XML文档 XMLHttpRequest对象 XMLHttpRequest对象与Ajax XMLHttpRequest对象的属性和方法 Ajax编程 如何使用Ajax 初始化对象 指定响应处理函数 发出http请求 处理服务器返回的信息 一个初步的Ajax开发框架...

    JavaScript王者归来part.1 总数2

     12.5 访问和操纵DOM节点   12.5.1 打开每一个盒子--遍历节点   12.5.2 弄清层级关系--父子与兄弟   12.5.3 如何搜索特定节点   12.5.4 克隆节点--一个使用cloneNode()复制表格的例子   12.5.5 移动节点...

    Ajax详解.rar

    Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的...

    JavaScript详解(第2版)

    第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...

    精通JavaScript(文档对象模型和事件驱动——window对象)

    为了能够操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就是“文档对象模型”。这些对象的组织类似一个树型结构,并表示一个Web文档的所有内容和组件。 注意:”文档对象模型”不是JavaScript语言的一...

    完整的javascript课程

    使用用户js和PIN 1111伪造“登录”) (高级DOM和事件) (OOP,地理位置,项目计划) 在我的网站上上的 (最终高级项目)。 您可以订阅更新 :winking_face: 什么是DOM和DOM操作文档对象模型:HTML文档的结构化表示...

    XMLHttpRequest手册

    压缩包“ajax.rar”内含:“《掌握Ajax....掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 3 部分: Ajax 中的高级请求和响应 ...

    JavaScript基础教程第8版

    《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...

    JavaScript组成、引入、输出、运算符基础知识讲解

    JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 下文重点给大家介绍js组成,引入,输出,运算符基础知识,具体详解如下...

    Javascript_weather_app:一个简单的Web应用程序,该应用程序使用javascript构建并从Accuweather API获取天气信息

    Javascript_weather_app 一个简单的Web应用... 2)innerHTML属性是文档对象模型(DOM)的一部分,该文档对象模型允许Javascript代码操纵显示的网站。 具体来说,它允许读取和替换给定DOM元素(HTML标记)中的所有内

    详解JavaScript对W3C DOM模版的支持情况

    本文档对象模型允许访问所有的文档内容和...此外,这里是文档属性,可以使用W3C DOM访问列表:  文档方法在W3C DOM: 此模型支持所有传统DOM提供的方法。此外,这里是由W3C DOM支持的方法列表:  示例: 这是(访问

Global site tag (gtag.js) - Google Analytics