29.1 获取文本框中的内容

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

阅读提示：《精通JavaScript动态网页编程》第二十九章主要讲的网页样式与元素定位，本节介绍了获取文本框中的内容。

第29章 网页样式与元素定位

动态网页是静态网页、网页样式表（CSS）以及JavaScript语言基于DOM的组合效果。由于各种浏览器所提供的动态网页的实现方法各不相同，故使用时应特别注意其使用规范。动态网页的基本任务就是根据用户的需要，动态地改变网页元素的内容或表现形式。常见的动态修改网页样式的方法有DHTML方法和W3C方法，本章主要举例介绍这两种方法的不同实现。最后，则是一个综合应用的举例。

29.1 获取文本框中的内容

本节实例给出一个使用DHML获取网页文本框中输入内容的实现方法。当用户单击“确定”按钮后，会弹出一个对话框，显示文本框中的内容。

技术要点

本节代码主要使用了document.getElementById( )方法，其主要功能和用法如下。

在DOM中，可以对页面元素进行访问，甚至对其进行操作。对于文档中的特定区域，如果已对其进行了惟一标识，则可以对该区域进行检索。

document.getElementById（元素标识）方法，返回id值为“元素标识”的对象的一个索引。

document.getElementsByName（元素名称）方法，返回name值为“元素名称”的所有XHTML元素对象的列表。

document.getElementsByTagName（标签名称）方法，返回别名为“标签名称”的所有XHTML元素的列表。

要使用这些方法，需要在HTML中定义网页元素时，为其添加name值或id值。通常的做法是，对于要进行引用的元素，同时为其定义两个属性的值，并且二者取值相同，这样，无论使用“document.getElementById（元素标识）”还是使用“document. getElementsByName（元素名称）”，都可以随时对该元素进行引用。

实现代码

<!------------------------------文件名：29.1.htm------------------------------>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>DHTML对象模型方法</title>
<script language="JavaScript">
<!--
function displayUsernameByDOM2()
{
//通过document.getElementById方法得到username的值
alert("输入的内容为：\n\n"+document.getElementById("username").value);
}
//-->
</script>
</head>
<body bgcolor="#ffc0c0" style="margin:40px">
<h2>获取网页文本框中输入的内容</h2><hr>
<form>
请输入：<input type="text" name="username" id="username">
<!--通过onclick调用displayUsernameByDOM2()函数-->
<input type="button" onclick="displayUsernameByDOM2();" value="确定">
</form>
</body>
</html>

运行该程序后，页面显示一个文本框和一个按钮，如图29.1所示。当在文本框中输入内容，并单击其后的按钮后，会弹出一个对话框，显示刚刚输入的内容，如图29.2所示。

图29.1 代码29.1.htm显示结果

图29.2 弹出对话框

源程序解读

（1）程序定义了一个名为username的文本框和一个“确定”按钮。文本框用于输入相应的内容，“确定”按钮的onclick事件则关联displayUsernameByDOM2( )函数，对用户输入的内容进行显示。

（2）在函数displayUsernameByDOM2( )中，使用alert( )弹出一个对话框，显示document.getElementById( )引用的元素的值。其中，使用("username").value对文本框的内容进行引用。

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

回书目 上一节 下一节

关于元素 DHML 程序精通JavaScript动态网页编程的

文章

博文

帖子

· 29.2 显示和修改文字内容（DHTML）(10/15)

· 30.7 模拟浏览器菜单(10/15)

· 29.6 综合应用(10/15)

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

· 10.3.7 ADT/UDT版式(06/22)

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

· PowerBuilder程序运行错误解释

· PowerBuilder程序设计语言之名词

专题

我也说两句

叫好

拍砖

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

·假期读书充电

· 第六章　你能帮我吗？..
· 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病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。

专题

最多好

最多砖