通过JavaScript和DOM进行数据访问

在一个Web页面中访问和处理各种各样的不同元素是经常性的工作，这可以通过使用javaScript和HTML文档对象模型(DOM)很容易实现。本文我们将介绍访问页面元素的各种方法并描述如何实现它们。

HTML DOM

根据W3C的介绍，“文档对象模型是一个语言中性接口的平台，它可以实现程序和脚本动态访问和更新文档的内容、结构和样式。”

所有ＨＴＭＬ元素同它们包含的文本及属性都可以通过DOM访问。一个元素的内容可以被修改或删除以及创建新元素。

当使用DOM和页面元素时，最重要的对象就是文档。它包含在windows对象中，但是你可以直接在JavaScript代码中键入并使用文档。当用作访问一个页面中的所有元素时，它代表整个HTML文档。你可以通过集合、属性和方法访问页面元素。本文我们将主要介绍通过各种方法访问web页的字段元素。

访问数据

当对页面及其数据进行操作时，你经常需要访问一个元素及与数据相关的信息。通过DOM和JavaScript访问每个页面元素时可以使用下面的方法：

getElementById()：返回拥有传递给该方法的指定id的第一个对象的引用。

getElementsByName()：返回拥有传递给该方法的指定名称的对象集合。

getElementsByTagName()：返回拥有传递给该方法的指定tag名的对象集合。

列表A包含一个简单的例子，它使用了上面列出的前两种方法。它包含一个有两个数据域的表单，在文档提交之前，必须为这两个数据域输入数据。利用传递恰当的id（例如，通过ID属性赋予input域的值），getElementById方法用来访问第一个数据域。getElementsByName方法通过赋给name属性的值来访问第二个数据域，该方法返回一个数组值，因此我只关心第一个值（例如，数组中下标索引为0的元素值）。

利用getElementsByTagName方法，我们可以为这种情况选择另外一种不同的实现方法。该方法允许你操纵页面内拥有指定tag名的所有元素的数组对象。例如，下面的一行用来将页面上的所有表格列元素组合在一个数组中。

var columns = document.getElementsByTagName("td");

对于我们的例子，我感兴趣的是表单上的input域。列表B使用getElementsByTagName方法替换前面的例子用来与其它两个方法形成对比。我们通过检查每个数组元素的值来进行有效性检查。

这两个例子都使用了input域，但是并不是说只能通过文档对象及其方法访问这一个元素。列表C首先获取输入给input域的数据，然后将它放入一个段元素中。当用户选择了提交按钮时，段元素被提交。