使用DOM技术操纵文档
时间:2006-02-09 来源:feiwen8772
我们知道,如果使用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>
</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">
</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">
</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">
</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">
</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">
</BODY></HTML>[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]
<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>
</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>
</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>
</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属性和方法操纵文档内容。
使用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>
</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">
</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">
</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">
</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">
</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">
</BODY></HTML>[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]
<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>
</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>
</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>
</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。
相关阅读 更多 +