JavaScript中怎么利用DOM实现数据访问

本篇文章给大家分享的是有关JavaScript中怎么利用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域的数据，然后将它放入一个段元素中。当用户选择了提交按钮时，段元素被提交。

另一种方法

我不想省去可能是访问元素最通用的方法，尤其是对于包含在一个页面表单内的数据。这种方法遍历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实现数据访问，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。