您的位置:知识库 » Web前端

使用DOM技术操纵文档

作者: 龍龙  来源: 博客园  发布时间: 2010-08-08 20:50  阅读: 1535 次  推荐: 0   原文链接   [收藏]  
[1] 使用DOM技术操纵文档
[2] 使用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属性进行赋值修改图形的内容。
  使用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装载进文档中。

 

[第1页][第2页]
0
0
 

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻