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

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

阅读更多
在前端展现越来越丰富的今天,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。

转摘自http://bbs.javascript.com.cn/simple/index.php?t180.html
分享到:
评论

相关推荐

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    这篇教程——"JavaScript学习手册十四:HTML DOM-文档元素的操作(二)"深入探讨了如何使用JavaScript来操纵HTML文档中的元素,进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示,它将网页内容...

    JavaScript语言教程:基础语法、DOM操作、事件处理及新特性详解

    使用场景及目标:通过本教程的学习,读者不仅可以学会基本语法,还能理解并掌握高级概念和技术,如DOM操纵、事件处理机制、异步编程及最新的ECMAScript规范。这不仅有助于改善用户体验、增强网站互动性和响应速度,...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...

    JavaScript dom css参考文档

    总的来说,这三份文档构成了一套完整的前端开发参考工具,涵盖了从编写JavaScript代码到应用CSS样式,再到通过DOM操纵页面元素的全过程。对于想要深入学习Web前端技术或者提升现有技能的开发者来说,这些文档无疑是...

    JavaScript DOM 高级程序设计

    《JavaScript DOM 高级程序设计》是一本深入探讨JavaScript与DOM(Document Object Model)交互的专著,主要针对想要提升JavaScript在网页动态效果和交互性方面能力的开发者。DOM是HTML和XML文档的一种结构化表示,...

    javascriptDOM

    JavaScript DOM(Document Object...在实际项目中,如jb51.net可能包含各种教程、代码示例和实践练习,帮助你深入理解和应用这些DOM相关的JavaScript技术。记得理论与实践相结合,多做实验,不断巩固和提升自己的技能。

    html dom 底层 javascript

    3. **添加元素**:使用`createElement()`创建新的DOM节点,然后用`appendChild()`将其添加到文档中。 4. **删除元素**:使用`removeChild()`从文档中移除节点。 #### DOM 中的重要数据类型 在DOM中,有几个关键的...

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

    《JavaScript.DOM高级程序设计》是一本深入探讨JavaScript与DOM(Document Object Model)交互技术的专业书籍。DOM是Web页面内容的结构化表示,JavaScript通过DOM API可以直接操作页面元素,实现动态效果和交互功能...

    AJAX 学习资料WORD文档

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

    PetSalon-Dom-操纵-运动:PetSalon Dom-操纵运动

    1. 元素选择:使用`getElementById`获取具有特定ID的元素,`getElementsByTagName`按标签名选择元素集合,`querySelector`和`querySelectorAll`则可以根据CSS选择器选取元素。 2. 属性操作:可以使用`.getAttribute`...

    DOM解析XML文档

    1. 加载XML文档:首先,解析器读取XML文件并将其转化为内存中的DOM树。这个过程包括验证XML的语法正确性、处理命名空间等。 2. 构建DOM树:解析器按照XML文档的结构创建一个节点树,每个元素、属性、文本、注释等都...

    经典之作javascript dom编程艺术源码

    JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...

    [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 dom2 源码及pdf

    这个标准由W3C(万维网联盟)制定,允许开发者通过JavaScript或者其他兼容的语言来操纵网页内容、结构以及样式。在JavaScript DOM2中,主要包含了几个核心部分:核心DOM、事件DOM、HTML DOM以及XML DOM。 一、核心...

    JavaScriptDOM编程艺术第二版

    DOM是HTML和XML文档的编程接口,它允许程序员和脚本通过JavaScript等语言操纵网页内容、结构和样式。 在本书中,作者详细讲解了如何利用JavaScript有效地操作DOM,实现动态网页效果。DOM提供了对网页元素的抽象表示...

    javascript DOM 编程艺术源码

    JavaScript DOM编程艺术是一本深入探讨如何使用JavaScript操作和操纵网页文档对象模型(Document Object Model)的经典书籍。DOM是HTML和XML文档的一种结构化表示,它允许我们通过编程方式访问和修改网页内容。这...

    javascript 高级程序设计

    - **样式与布局**:使用JavaScript动态修改CSS样式,处理布局和定位问题。 - **HTML DOM**:深入HTML元素的特定属性和方法,如表单处理、图像操作等。 - **DOM遍历工具**:NodeIterator和TreeWalker的使用,高效...

    JavaScript & DOM Enlightenment

    JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源,主要涵盖了JavaScript编程语言以及文档对象模型(Document Object Model)的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript DOM编程艺术

    JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的著作,主要涵盖了如何利用JavaScript语言操作网页文档对象模型(Document Object Model)的各种技术。DOM是HTML和XML文档的一种结构化表示,它允许程序和...

Global site tag (gtag.js) - Google Analytics