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實現數據訪問，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。