JavaScript和DOM轻松实现数据访问

你对通过JavaScript和DOM进行数据访问的方法是否了解，这里向大家简单介绍一下，首先看一下HTML DOM的概念，根据W3C的介绍，“DOM文档对象模型是一个语言中性接口的平台，它可以实现程序和脚本动态访问和更新文档的内容、结构和样式。”

通过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域的数据，然后将它放入一个段元素中。当用户选择了提交按钮时，段元素被提交。#p#

另一种方法

我不想省去可能是访问元素最通用的方法，尤其是对于包含在一个页面表单内的数据。这种方法遍历DOM树来搜索某个元素，然后访问或操作它或它们的内容。页面的可视图表可以提供良好的可视来源，但是快速看一眼页面的源码可以提供我们一个样本信息。例如，假如我们需要访问列表D的页面上名为txtAddress的input域。我们可以按照下面的步骤遍历HTML的DOM来搜索想要的元素。

我们是从页面的顶部开始的，因此就可以从文档对象开始。

页面的body和文档对象中***个元素是表单。

进入表单元素后，我们就可以发现地址域。

到此为止，我们发现了想要的元素。因此，我们从文档对象开始，然后到表单，***到名为地址的input元素结束。HTML表单包含在文档对象的表单属性中。它返回页面上的表单数组，因此我们可以通过索引值（从0开始）来访问每个表单。你还可以使用表单的名字作为文档对象的一个属性来访问表单。下面的例子使用***种方法访问地址元素及其值。

 
 
 

  
  
  
document.forms[0].address.value； 
  
  
  

 
 
 

或者，你可以使用实际的表单名（在表单元素的name属性中指定）来访问。如下所示：

 
 
 

  
  
  
document.frmTest.address.value; 
  
  
  

 
 
 

列表E中我对***个例子作了修改，使用这种方法访问页面元素及其值来进行有效性验证。

获得你所需要的

DOM提供了访问一个HTML页面内容的所有需求。它不仅可以用来访问和操纵元素的数据，还可以完成更多的功能。

本专栏提供的这些概念对有经验的web开发人员来说可能十分简单，但是对那些刚进入这一领域的新手需要知道可以有多种方法完成一个任务。

当前标题：JavaScript和DOM轻松实现数据访问
网站链接：http://www.shufengxianlan.com/qtweb/news42/310342.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联