你對(duì)通過(guò)JavaScript和DOM進(jìn)行數(shù)據(jù)訪(fǎng)問(wèn)的方法是否了解，這里向大家簡(jiǎn)單介紹一下，首先看一下HTML DOM的概念，根據(jù)W3C的介紹，“DOM文檔對(duì)象模型是一個(gè)語(yǔ)言中性接口的平臺(tái)，它可以實(shí)現(xiàn)程序和腳本動(dòng)態(tài)訪(fǎng)問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。”

通過(guò)JavaScript和DOM進(jìn)行數(shù)據(jù)訪(fǎng)問(wèn)

在一個(gè)Web頁(yè)面中訪(fǎng)問(wèn)和處理各種各樣的不同元素是經(jīng)常性的工作，這可以通過(guò)使用javaScript和HTML文檔對(duì)象模型(DOM)很容易實(shí)現(xiàn)。本文我們將介紹訪(fǎng)問(wèn)頁(yè)面元素的各種方法并描述如何實(shí)現(xiàn)它們。

HTML DOM

根據(jù)W3C的介紹，“文檔對(duì)象模型是一個(gè)語(yǔ)言中性接口的平臺(tái)，它可以實(shí)現(xiàn)程序和腳本動(dòng)態(tài)訪(fǎng)問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。”

所有HTML元素同它們包含的文本及屬性都可以通過(guò)DOM訪(fǎng)問(wèn)。一個(gè)元素的內(nèi)容可以被修改或刪除以及創(chuàng)建新元素。

當(dāng)使用DOM和頁(yè)面元素時(shí)，最重要的對(duì)象就是文檔。它包含在windows對(duì)象中，但是你可以直接在JavaScript代碼中鍵入并使用文檔。當(dāng)用作訪(fǎng)問(wèn)一個(gè)頁(yè)面中的所有元素時(shí)，它代表整個(gè)HTML文檔。你可以通過(guò)集合、屬性和方法訪(fǎng)問(wèn)頁(yè)面元素。本文我們將主要介紹通過(guò)各種方法訪(fǎng)問(wèn)web頁(yè)的字段元素。

訪(fǎng)問(wèn)數(shù)據(jù)

當(dāng)對(duì)頁(yè)面及其數(shù)據(jù)進(jìn)行操作時(shí)，你經(jīng)常需要訪(fǎng)問(wèn)一個(gè)元素及與數(shù)據(jù)相關(guān)的信息。通過(guò)DOM和JavaScript訪(fǎng)問(wèn)每個(gè)頁(yè)面元素時(shí)可以使用下面的方法：

getElementById()：返回?fù)碛袀鬟f給該方法的指定id的***個(gè)對(duì)象的引用。

getElementsByName()：返回?fù)碛袀鬟f給該方法的指定名稱(chēng)的對(duì)象集合。

getElementsByTagName()：返回?fù)碛袀鬟f給該方法的指定tag名的對(duì)象集合。

列表A包含一個(gè)簡(jiǎn)單的例子，它使用了上面列出的前兩種方法。它包含一個(gè)有兩個(gè)數(shù)據(jù)域的表單，在文檔提交之前，必須為這兩個(gè)數(shù)據(jù)域輸入數(shù)據(jù)。利用傳遞恰當(dāng)?shù)膇d（例如，通過(guò)ID屬性賦予input域的值），getElementById方法用來(lái)訪(fǎng)問(wèn)***個(gè)數(shù)據(jù)域。getElementsByName方法通過(guò)賦給name屬性的值來(lái)訪(fǎng)問(wèn)第二個(gè)數(shù)據(jù)域，該方法返回一個(gè)數(shù)組值，因此我只關(guān)心***個(gè)值（例如，數(shù)組中下標(biāo)索引為0的元素值）。

利用getElementsByTagName方法，我們可以為這種情況選擇另外一種不同的實(shí)現(xiàn)方法。該方法允許你操縱頁(yè)面內(nèi)擁有指定tag名的所有元素的數(shù)組對(duì)象。例如，下面的一行用來(lái)將頁(yè)面上的所有表格列元素組合在一個(gè)數(shù)組中。

varcolumns=document.getElementsByTagName("td");  
 

對(duì)于我們的例子，我感興趣的是表單上的input域。列表B使用getElementsByTagName方法替換前面的例子用來(lái)與其它兩個(gè)方法形成對(duì)比。我們通過(guò)檢查每個(gè)數(shù)組元素的值來(lái)進(jìn)行有效性檢查。

這兩個(gè)例子都使用了input域，但是并不是說(shuō)只能通過(guò)文檔對(duì)象及其方法訪(fǎng)問(wèn)這一個(gè)元素。列表C首先獲取輸入給input域的數(shù)據(jù)，然后將它放入一個(gè)段元素中。當(dāng)用戶(hù)選擇了提交按鈕時(shí)，段元素被提交。#p#

另一種方法

我不想省去可能是訪(fǎng)問(wèn)元素最通用的方法，尤其是對(duì)于包含在一個(gè)頁(yè)面表單內(nèi)的數(shù)據(jù)。這種方法遍歷DOM樹(shù)來(lái)搜索某個(gè)元素，然后訪(fǎng)問(wèn)或操作它或它們的內(nèi)容。頁(yè)面的可視圖表可以提供良好的可視來(lái)源，但是快速看一眼頁(yè)面的源碼可以提供我們一個(gè)樣本信息。例如，假如我們需要訪(fǎng)問(wèn)列表D的頁(yè)面上名為txtAddress的input域。我們可以按照下面的步驟遍歷HTML的DOM來(lái)搜索想要的元素。

我們是從頁(yè)面的頂部開(kāi)始的，因此就可以從文檔對(duì)象開(kāi)始。

頁(yè)面的body和文檔對(duì)象中***個(gè)元素是表單。

進(jìn)入表單元素后，我們就可以發(fā)現(xiàn)地址域。

到此為止，我們發(fā)現(xiàn)了想要的元素。因此，我們從文檔對(duì)象開(kāi)始，然后到表單，***到名為地址的input元素結(jié)束。HTML表單包含在文檔對(duì)象的表單屬性中。它返回頁(yè)面上的表單數(shù)組，因此我們可以通過(guò)索引值（從0開(kāi)始）來(lái)訪(fǎng)問(wèn)每個(gè)表單。你還可以使用表單的名字作為文檔對(duì)象的一個(gè)屬性來(lái)訪(fǎng)問(wèn)表單。下面的例子使用***種方法訪(fǎng)問(wèn)地址元素及其值。

document.forms[0].address.value；  
 

或者，你可以使用實(shí)際的表單名（在表單元素的name屬性中指定）來(lái)訪(fǎng)問(wèn)。如下所示：

document.frmTest.address.value;  
 

列表E中我對(duì)***個(gè)例子作了修改，使用這種方法訪(fǎng)問(wèn)頁(yè)面元素及其值來(lái)進(jìn)行有效性驗(yàn)證。

獲得你所需要的

DOM提供了訪(fǎng)問(wèn)一個(gè)HTML頁(yè)面內(nèi)容的所有需求。它不僅可以用來(lái)訪(fǎng)問(wèn)和操縱元素的數(shù)據(jù)，還可以完成更多的功能。

本專(zhuān)欄提供的這些概念對(duì)有經(jīng)驗(yàn)的web開(kāi)發(fā)人員來(lái)說(shuō)可能十分簡(jiǎn)單，但是對(duì)那些剛進(jìn)入這一領(lǐng)域的新手需要知道可以有多種方法完成一個(gè)任務(wù)。

【編輯推薦】

1. JavaScript DOM特性與應(yīng)用詳解
2. 術(shù)語(yǔ)匯編 Javascript DOM技術(shù)探究
3. JavaScript獲取HTML DOM節(jié)點(diǎn)元素詳解
4. 深入了解JavaScript HTML DOM對(duì)象
5. 解析HTML DOM Checkbox對(duì)象的屬性和方法