JavaScript高级施用：使用DOM技术操纵文档（转载）
日期：2014-05-16 浏览次数：20483 次
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
