29.2 显示和修改文字内容（DHTML）

作者: 王润森、王俊杰出处:人民邮电出版社　2007-10-15 14:30　砖好评论条　进入论坛

阅读提示：《精通JavaScript动态网页编程》第二十九章主要讲的是网页样式与元素定位，本节介绍了显示和修改文字内容（DHTML）。

29.2 显示和修改文字内容（DHTML）

本节实例给出一种使用DHTML对象模型方法显示和修改文字内容的实现方法。当用户单击“显示”按钮时，可以显示相应文字的内容，当用户单击“改变”按钮时，可以改变相应文字的内容。

技术要点

本节代码主要使用了DHTML对象模型方法显示和修改文字内容的实现方法和innerHTML属性，其主要功能和用法如下。

DHTML对象模型方法为JavaScript提供了得到网页对象的另外方法，使用时可以不必具体了解文档对象模型的结构层次，而直接得到网页中的所需元素对象。这样，JavaScript就可以方便地改变网页内容及网页的表现方式。

该对象模型方法具有如下特点。在HTML中，网页中的每一对标记就是一个元素对象，例如，<p></p>、<div></div>、<table></table>等。为得到网页中的对象，可先将每一个标记赋值为一个惟一的id，例如，<p id="block1"></p>、<div id="titleBar"></div>等。
通过对对象id的引用，就可以使用“document.getElementById（元素标识）”方法得到所需的方法。
innerHTML属性允许对HTML元素内容的简单读取和修改。在IE中，还支持innerText、outerText、outerHTML属性。
innerText与innerHTML类似，只是用innerText设置的内容都被作为纯文本来处理。因此，不会生成相应的HTML元素。outerText与outerHTML属性，分别和相对的Inner属性相似，只是这两个属性还对元素本身进行修改。

实现代码

<!------------------------------文件名：29.2.htm------------------------------>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHTML对象模型方法</title>
<script language="JavaScript">
<!--
function display()          //函数：显示内容
{
var title = document.getElementById('titleBar').innerHTML;
alert(title);
}
function change()          //函数：修改内容
{
document.getElementById('titleBar').innerHTML =
'这是<span style="border:1px solid">改变后</span>的文本';
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0">
<h2>显示和修改网页中文字的内容</h2><hr>
<h1 id="titleBar">这是一行测试文本</h1><hr>
<div style="margin-top:10px;">
<!--分别通过onclick调用display()函数和change()函数，用以显示内容和修改内容-->
<input type="button" value="显示"  onclick="display();">
<input type="button" value="改变" onclick="change()">
</div>
</body>
</html>

运行该程序后的显示结果如图29.3所示。单击页面上的“显示”按钮，会弹出如图29.4所示的对话框。单击页面上的“修改”按钮，页面内容会改变，如图29.5所示。此时，再次单击页面上的“显示”按钮，会弹出29.6所示的对话框。

图29.3 代码29.2.htm显示结果

图29.4 弹出的对话框

图29.5 改变后的显示结果

图29.6 改变后弹出的对话框

源程序解读
（1）程序定义了一个名为titleBar的单行文本，一个“显示”按钮和一个“改变”按钮，用于对单行文本进行相应的处理。

（2）“显示”按钮的onclick事件关联函数display( )，函数中，首先使用“document. getElementById('titleBar').innerHTML”将单行文本的内容取出，并存储在变量title中，随后，使用alert(title)将其显示出来。

（3）“改变”按钮的onclick事件关联函数change( )，函数中，通过对“document. getElementById('titleBar').innerHTML”重新赋值，从而改变单行文本的内容。

【责任编辑：杜书 TEL：（010）68476606】

回书目 上一节 下一节

关于显示模型 DHTML HTML 元素程序精通JavaScript动态网页编程的

文章

博文

帖子

· 29.6 综合应用(10/15)

· 29.4 显示和修改网页内容（W3C）(10/15)

· 29.3 处理网页表格内容（DHTML）(10/15)

· 29.1 获取文本框中的内容(10/15)

· 1.17 提供程序模型(04/29)

· 应用程序访问权限完全攻略

· 写程序和聊天

· rails与mysql之间中文数据显示不一致的问题

· 谁能帮我做个linux下的系统检测小程序

· 电力调度指挥中心3DLP大屏幕投影拼接显示系统..

专题

我也说两句

叫好

拍砖

中国最大的网络技术网站 ·
技术成就梦想

·假期读书充电

· 第六章　你能帮我吗？..
· Linux笔试面试题选摘测..
· 08年5月软考网管上午真..
· 性能测试从零开始目录
· 08年5月软考网工上午真..
· 上周拒绝服务攻击（DDo..

· 08年5月各大网上书店及..
· 2008年5月24日软考试题..
· 软件设计师专家临考模..
· 上周网络管理员专家自..
· 网络工程师自测获奖名..
· 08年4月各大网上书店及..

排行榜

·假期读书充电 (查看6738次)
·1.2 网络定义 (查看1197次)
·《网管员必读—网络应用》自测.. (查看1090次)
·SQL Server入门到精通技术自测.. (查看1088次)
·历次技术自测获奖网友详细信息 (查看1040次)

·SQL Server入门到精通技术自测试题答案 (8个砖)
·超级网管员——网络应用技术自测试题答案 (6个砖)
·历次技术自测获奖网友详细信息 (4个砖)
·网管员全真面试题自测获奖结果及答案解析 (4个砖)
·免费讲座：搜索引擎营销打造成功网站 (3个砖)

·假期读书充电 (13个好)
·SQL Server入门到精通技术自测试题答案 (4个好)
·Visual C++数字图像处理开发入门与编程实践 (3个好)
·路由器配置自测获奖结果及答案解析 (3个好)
·《游戏开发核心技术-剧本与角色创造》阅读不枯燥 (3个好)

·Ajax+JSP网站开发从入门到精通 (06月)
·ASP.NET Ajax网站开发从入门到精通 (06月)
·非常网管——网络管理从入门到精通 (06月)
·ANT IN ACTION 第2版中文版 (06月)
·欺骗的艺术 (06月)

·ARP协议及欺骗原理
·独家体验：在西三环亲历北京免费无..

· 周末病毒预报：视频宝..
· NAC精要指南:什么是网..
· 布线测试中的常见问题..
· ASP.NET Ajax网站开发..
· 网管员必读：网络链路..
· SQL Server 2008中不推..
· 路由器故障排除实例讲解
· Cisco 认证考试费用全..

· 微软针对XP SP2的远程..
· 山东临沂网通联合公安..
· Cisco考试费用全线涨价..
· 企业无线网络设置10大..
· Windows Server 2003网..
· 上海宣判三起网络知识..
· 微软Sever 2008自带虚..
· 金山信息安全技术公司..

订阅技术快讯

电子杂志下载

名称：SQL Server数据库管理精品黄皮书
简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中

名称：2007路由技术大全
简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完

名称：网络安全精品应用黄皮书
简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖