CSDN博客

img BlessK

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

发表于2004/10/19 13:11:00  1046人阅读

转自:http://tjian.myrice.com/study_data/script-2/1.htm
我们知道,如果使用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属性进行赋值修改图形的内容。点击这里运行这个实例。

阅读全文
0 0

相关文章推荐

img
取 消
img