建站
咨詢
售后
建站咨詢
新聞中心
你對(duì)通過JavaScript和DOM進(jìn)行數(shù)據(jù)訪問的方法是否了解，這里向大家簡單介紹一下，首先看一下HTML DOM的概念，根據(jù)W3C的介紹，“DOM文檔對(duì)象模型是一個(gè)語言中性接口的平臺(tái)，它可以實(shí)現(xiàn)程序和腳本動(dòng)態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。”
通過JavaScript和DOM進(jìn)行數(shù)據(jù)訪問
在一個(gè)Web頁面中訪問和處理各種各樣的不同元素是經(jīng)常性的工作，這可以通過使用javaScript和HTML文檔對(duì)象模型(DOM)很容易實(shí)現(xiàn)。本文我們將介紹訪問頁面元素的各種方法并描述如何實(shí)現(xiàn)它們。
HTML DOM
根據(jù)W3C的介紹，“文檔對(duì)象模型是一個(gè)語言中性接口的平臺(tái)，它可以實(shí)現(xiàn)程序和腳本動(dòng)態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式?！?/p>
所有HTML元素同它們包含的文本及屬性都可以通過DOM訪問。一個(gè)元素的內(nèi)容可以被修改或刪除以及創(chuàng)建新元素。
當(dāng)使用DOM和頁面元素時(shí)，最重要的對(duì)象就是文檔。它包含在windows對(duì)象中，但是你可以直接在JavaScript代碼中鍵入并使用文檔。當(dāng)用作訪問一個(gè)頁面中的所有元素時(shí)，它代表整個(gè)HTML文檔。你可以通過集合、屬性和方法訪問頁面元素。本文我們將主要介紹通過各種方法訪問web頁的字段元素。
訪問數(shù)據(jù)
當(dāng)對(duì)頁面及其數(shù)據(jù)進(jìn)行操作時(shí)，你經(jīng)常需要訪問一個(gè)元素及與數(shù)據(jù)相關(guān)的信息。通過DOM和JavaScript訪問每個(gè)頁面元素時(shí)可以使用下面的方法：
getElementById()：返回?fù)碛袀鬟f給該方法的指定id的***個(gè)對(duì)象的引用。
getElementsByName()：返回?fù)碛袀鬟f給該方法的指定名稱的對(duì)象集合。
getElementsByTagName()：返回?fù)碛袀鬟f給該方法的指定tag名的對(duì)象集合。
列表A包含一個(gè)簡單的例子，它使用了上面列出的前兩種方法。它包含一個(gè)有兩個(gè)數(shù)據(jù)域的表單，在文檔提交之前，必須為這兩個(gè)數(shù)據(jù)域輸入數(shù)據(jù)。利用傳遞恰當(dāng)?shù)膇d（例如，通過ID屬性賦予input域的值），getElementById方法用來訪問***個(gè)數(shù)據(jù)域。getElementsByName方法通過賦給name屬性的值來訪問第二個(gè)數(shù)據(jù)域，該方法返回一個(gè)數(shù)組值，因此我只關(guān)心***個(gè)值（例如，數(shù)組中下標(biāo)索引為0的元素值）。
利用getElementsByTagName方法，我們可以為這種情況選擇另外一種不同的實(shí)現(xiàn)方法。該方法允許你操縱頁面內(nèi)擁有指定tag名的所有元素的數(shù)組對(duì)象。例如，下面的一行用來將頁面上的所有表格列元素組合在一個(gè)數(shù)組中。
- varcolumns=document.getElementsByTagName("td");
對(duì)于我們的例子，我感興趣的是表單上的input域。列表B使用getElementsByTagName方法替換前面的例子用來與其它兩個(gè)方法形成對(duì)比。我們通過檢查每個(gè)數(shù)組元素的值來進(jìn)行有效性檢查。
這兩個(gè)例子都使用了input域，但是并不是說只能通過文檔對(duì)象及其方法訪問這一個(gè)元素。列表C首先獲取輸入給input域的數(shù)據(jù)，然后將它放入一個(gè)段元素中。當(dāng)用戶選擇了提交按鈕時(shí)，段元素被提交。#p#
另一種方法
我不想省去可能是訪問元素最通用的方法，尤其是對(duì)于包含在一個(gè)頁面表單內(nèi)的數(shù)據(jù)。這種方法遍歷DOM樹來搜索某個(gè)元素，然后訪問或操作它或它們的內(nèi)容。頁面的可視圖表可以提供良好的可視來源，但是快速看一眼頁面的源碼可以提供我們一個(gè)樣本信息。例如，假如我們需要訪問列表D的頁面上名為txtAddress的input域。我們可以按照下面的步驟遍歷HTML的DOM來搜索想要的元素。
我們是從頁面的頂部開始的，因此就可以從文檔對(duì)象開始。
頁面的body和文檔對(duì)象中***個(gè)元素是表單。
進(jìn)入表單元素后，我們就可以發(fā)現(xiàn)地址域。
到此為止，我們發(fā)現(xiàn)了想要的元素。因此，我們從文檔對(duì)象開始，然后到表單，***到名為地址的input元素結(jié)束。HTML表單包含在文檔對(duì)象的表單屬性中。它返回頁面上的表單數(shù)組，因此我們可以通過索引值（從0開始）來訪問每個(gè)表單。你還可以使用表單的名字作為文檔對(duì)象的一個(gè)屬性來訪問表單。下面的例子使用***種方法訪問地址元素及其值。
- document.forms[0].address.value；
或者，你可以使用實(shí)際的表單名（在表單元素的name屬性中指定）來訪問。如下所示：
- document.frmTest.address.value;
列表E中我對(duì)***個(gè)例子作了修改，使用這種方法訪問頁面元素及其值來進(jìn)行有效性驗(yàn)證。
獲得你所需要的
DOM提供了訪問一個(gè)HTML頁面內(nèi)容的所有需求。它不僅可以用來訪問和操縱元素的數(shù)據(jù)，還可以完成更多的功能。
本專欄提供的這些概念對(duì)有經(jīng)驗(yàn)的web開發(fā)人員來說可能十分簡單，但是對(duì)那些剛進(jìn)入這一領(lǐng)域的新手需要知道可以有多種方法完成一個(gè)任務(wù)。
當(dāng)前題目：JavaScript和DOM輕松實(shí)現(xiàn)數(shù)據(jù)訪問
分享路徑：http://www.dlmjj.cn/article/dhsjgcc.html
