JavaScript中怎么利用DOM实现数据访问
本篇文章给大家分享的是有关JavaScript中怎么利用DOM实现数据访问,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
发展壮大离不开广大客户长期以来的信赖与支持,我们将始终秉承“诚信为本、服务至上”的服务理念,坚持“二合一”的优良服务模式,真诚服务每家企业,认真做好每个细节,不断完善自我,成就企业,实现共赢。行业涉及纱窗等,在成都网站建设、网络营销推广、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。
通过JavaScript和DOM进行数据访问
在一个Web页面中访问和处理各种各样的不同元素是经常性的工作,这可以通过使用javaScript和HTML文档对象模型(DOM)很容易实现。本文我们将介绍访问页面元素的各种方法并描述如何实现它们。
HTML DOM
根据W3C的介绍,“文档对象模型是一个语言中性接口的平台,它可以实现程序和脚本动态访问和更新文档的内容、结构和样式。”
所有HTML元素同它们包含的文本及属性都可以通过DOM访问。一个元素的内容可以被修改或删除以及创建新元素。
当使用DOM和页面元素时,最重要的对象就是文档。它包含在windows对象中,但是你可以直接在JavaScript代码中键入并使用文档。当用作访问一个页面中的所有元素时,它代表整个HTML文档。你可以通过集合、属性和方法访问页面元素。本文我们将主要介绍通过各种方法访问web页的字段元素。
访问数据
当对页面及其数据进行操作时,你经常需要访问一个元素及与数据相关的信息。通过DOM和JavaScript访问每个页面元素时可以使用下面的方法:
getElementById():返回拥有传递给该方法的指定id的***个对象的引用。
getElementsByName():返回拥有传递给该方法的指定名称的对象集合。
getElementsByTagName():返回拥有传递给该方法的指定tag名的对象集合。
列表A包含一个简单的例子,它使用了上面列出的前两种方法。它包含一个有两个数据域的表单,在文档提交之前,必须为这两个数据域输入数据。利用传递恰当的id(例如,通过ID属性赋予input域的值),getElementById方法用来访问***个数据域。getElementsByName方法通过赋给name属性的值来访问第二个数据域,该方法返回一个数组值,因此我只关心***个值(例如,数组中下标索引为0的元素值)。
利用getElementsByTagName方法,我们可以为这种情况选择另外一种不同的实现方法。该方法允许你操纵页面内拥有指定tag名的所有元素的数组对象。例如,下面的一行用来将页面上的所有表格列元素组合在一个数组中。
varcolumns=document.getElementsByTagName("td");
对于我们的例子,我感兴趣的是表单上的input域。列表B使用getElementsByTagName方法替换前面的例子用来与其它两个方法形成对比。我们通过检查每个数组元素的值来进行有效性检查。
这两个例子都使用了input域,但是并不是说只能通过文档对象及其方法访问这一个元素。列表C首先获取输入给input域的数据,然后将它放入一个段元素中。当用户选择了提交按钮时,段元素被提交。
另一种方法
我不想省去可能是访问元素最通用的方法,尤其是对于包含在一个页面表单内的数据。这种方法遍历DOM树来搜索某个元素,然后访问或操作它或它们的内容。页面的可视图表可以提供良好的可视来源,但是快速看一眼页面的源码可以提供我们一个样本信息。例如,假如我们需要访问列表D的页面上名为txtAddress的input域。我们可以按照下面的步骤遍历HTML的DOM来搜索想要的元素。
我们是从页面的顶部开始的,因此就可以从文档对象开始。
页面的body和文档对象中***个元素是表单。
进入表单元素后,我们就可以发现地址域。
到此为止,我们发现了想要的元素。因此,我们从文档对象开始,然后到表单,***到名为地址的input元素结束。HTML表单包含在文档对象的表单属性中。它返回页面上的表单数组,因此我们可以通过索引值(从0开始)来访问每个表单。你还可以使用表单的名字作为文档对象的一个属性来访问表单。下面的例子使用***种方法访问地址元素及其值。
document.forms[0].address.value;
或者,你可以使用实际的表单名(在表单元素的name属性中指定)来访问。如下所示:
document.frmTest.address.value;
列表E中我对***个例子作了修改,使用这种方法访问页面元素及其值来进行有效性验证。
获得你所需要的
DOM提供了访问一个HTML页面内容的所有需求。它不仅可以用来访问和操纵元素的数据,还可以完成更多的功能。
以上就是JavaScript中怎么利用DOM实现数据访问,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
当前标题:JavaScript中怎么利用DOM实现数据访问
分享网址:http://myzitong.com/article/jjodes.html