龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

JavaScript和DOM轻松实现数据访问(1)(2)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
另一种方法 我不想省去可能是访问元素最通用的方法,尤其是对于包含在一个页面表单内的数据。这种方法遍历DOM树来搜索某个元素,然后访问或操作它

另一种方法

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

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

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

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

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

  1. document.forms[0].address.value;  
  2.  

或者,你可以使用实际的表单名(在表单元素的name属性中指定)来访问。如下所示:

  1. document.frmTest.address.value;  
  2.  

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

获得你所需要的

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

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

精彩图集

赞助商链接