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特性與應用詳解
- 術語匯編 Javascript DOM技術探究
- JavaScript獲取HTML DOM節點元素詳解
- 深入了解JavaScript HTML DOM對象
- 解析HTML DOM Checkbox對象的屬性和方法
