Javascript通路html頁面的控件

======================================================

注：本文源代碼點此下載下傳

======================================================

這段時間在公司比較的空閑,決定研究研究javascript通路html控件,這是很普遍的,這裡我系統的研究javascript的通路方式,測試通過并有下面一些研究成就,供大家分享和補充。下面切入正題:

通路控件的主要對象是:document對象。分别對應目前文檔所有的(子對象)個人觀點。并且已經提供的幾個主要方法來通路對象。

1.document.getelementbyid

2.document.getelementsbyname

3document.getelementsbytagname

4document.all

下面我主要談談以上幾個方法的具體用法:

一.首先我來談談document.getelementbyid的用法。

var obj=document.getelementbyid(“id”) 根據指定的id屬性值得到對象。傳回id屬性值等于id的第一個對象的引用。假如對應的為一組對象,則傳回該組對象中的第一個。

)”)”我在ie中測試了上面代碼,在第一個文本框中輸入1,在第二個文本中輸入2,然後點選兩個按鈕,大吃一斤。結果兩個按鈕都傳回了第一個文本框的值。這說明了ie執行document.getelementbyid(elementname)的時候,傳回的是第一個name或者id等于elementname的對象,并不是根據id來查找的。

但相反我在firefox中就不存在這個問題。firefox執行document.getelementbyid(elementname)的時候隻能查找id等于elementname對象,如果不存在在傳回null.

二.下面看看document.getelementsbyname的用法。

var obj=document.getelementsbyname(“name”)根據name屬性的值擷取對象集合。傳回name等于指定name對象的集合。注意這裡傳回的是一個集合,包括隻有一個元素的情況也是一個集合。

document.getelementsbyname("name")[0?1?2?3?....] 這樣來擷取某一個元素。注意javascript中的集合取一個值可以用[],也可以用(),(本人測試通過,但沒有資料這麼寫)。

如:

三.document.getelementsbytagname的用法:

var ojbs=document.getelementsbytagname(“tag”)根據基于指定元素名稱對象的集合。傳回tag屬性等于指定tag标記的集合。這裡也傳回的是一個集合。(同上)

四.document.all用法。

document.all是頁面内所有元素的一個集合。例如:

document.all(0)表示頁面的第一個元素。

document.all(“txt”)表示頁面上id或name等于txt的所有對象的單個元素和集合元素。

如果頁面上的id或name等于txt隻有一個元素(包括name和id情況),那麼document.all()的結果就隻是一個元素,反之就是擷取一個集合。(綜合了document.getelementbyid和document.getelementsbyname的各自的特點)。

也可以這樣寫:document.all.txt也是一樣。

例如:

代碼2:

但是常常name可以相同(如:用checkbox取使用者的多項愛好的情況)

理論上一個頁面中的id是互不相同的,如果出現不同的tags而有相同的id的話,document.all.id就會失敗,就象這樣:

是以說遇到了這種情況的話用下面這種寫法:

另外document.all可以判斷浏覽器的種類是否是ie,

document.all---------針對ie

document.layers------------針對netscape

這兩個集合.all隻在ie裡面有效,layers隻在nc裡面有效

是以就可以通過這個方式來判斷不同的浏覽器。

最後我來說說getelementbyid和getelementsbyname使用範圍:

id就像身份證号,是唯一的,name就像姓名一樣可以同名。

一個元素定義了id,引用該元素時直接用id屬性,而name通常用在form中,且必須由document.form.***而來,也就是說,name 屬性定義的元素在腳本中是document 對象的子對象。

1. name用于form内元素,送出需要.

id用于form外元素好用因為dom能直接取得單一進制素

2.id 每頁隻能有一個

name 可以有多個 name有些标簽不推薦用它

3. 表單元素(form input textarea select)與架構元素(iframe frame) 用 name這些元素都與表單(架構元素作用于form的target)送出有關, 在表單的接收頁面隻接收有name的元素 ,賦id 的元素通過表單是接收不到值的, 你自己可以驗證一下有一個例外a 可以賦 name 作為錨點, 也可以賦 id;隻能賦id不能賦name的元素:(除去與表單相關的元素都隻能賦id)body litabletrtdthpdivspanpredldtddfontb等等。

這裡我引出另一個問題,既然有了id那為什麼還要name呢?

最直接答案:id就像是一個人身份證号,而 name就像是他的名字,id雖然是唯一的,但name是可以重複的。

具體來說:對于id來說,它就是client端html元素的identity 。而name 其實要複雜的多,因為name有很多種的用途,是以它并不能完全由id來代替,進而将其取消掉。

參考網站資料如下:具體用途有:

用途1:作為可與伺服器互動資料的html元素的伺服器端的标示,比如input、select、textarea、和button等。我們可以在伺服器端根據其name通過request.params取得元素送出的值。用途2:html元素inputtype= "radio "分組,我們知道radiobutton控件在同一個分組類,check操作是mutex的,同一時間隻能選中一個radio,這個分組就是根據相同的name屬性來實作的。

用途3:建立頁面中的錨點,我們知道link是獲得一個頁面超級連結,如果不用href屬性,而改用name,如:,我們就獲得了一個頁面錨點。

用途4:作為對象的identity,如applet、object、embed等元素。比如在applet對象執行個體中,我們将使用其name來引用該對象。

用途5:在img元素和map元素之間關聯的時候,如果要定義img的熱點區域,需要使用其屬性usemap,使usemap="#name"(被關聯的map元素的name)

用途6:某些特定元素的屬性,如attribute,和param。例如為object定義參數

.

顯然這些用途都不是能簡單的使用 id來代替掉的,是以html元素的id和name的卻别并不是身份證号碼和姓名這樣的差別,它們更本就是不同作用的東西。 當然html元素的name屬性在頁面中也可以起那麼一點id的作用,因為在dhtml對象樹中,我們可以使用 document.getelementsbyname 來擷取一個包含頁面中所有指定name元素的對象數組。

在這裡順便說一下,要是頁面中有n(n >1) 個html元素的id都相同了怎麼辦?在 dhtml對象中怎麼引用他們呢?如果我們使用aspx頁面,這樣的情況是不容易發生的,因為 aspnet程序在處理aspx 頁面時根本就不允許有id非唯一,這是頁面會被抛出異常而不能被正常的render。要是不是動态頁面,我們硬要讓id重複那ie怎麼搞呢?

這個時候我們還是可以繼續使用document.getelementbyid擷取對象,隻不過我們隻能擷取id重複的那些對象中在html render時第一個出現的對象。而這時重複的id會在引用時自動變成一個數組,id重複的元素按 render的順序依次存在于數組中。

getelementbyid("xxx")傳回第一個id屬性為"xxx"或者特定表單元素name為"xxx"的元素

getelementsbyname("xxx")傳回所有id屬性為"xxx"或者特定表單元素name為"xxx"的元素

這裡要說明一下其實getelementbyid和getelementsbyname取元素的範圍是一樣的,差別隻是前者隻傳回第一個元素後者傳回所有元素的集合

另外說明一下表單元素 表單元素指的是在标簽中資料可以被送出給伺服器的标簽

主要有三個标簽 這三個标簽隻有在name屬性不為空的時候才能将資料送出給伺服器 是以這三種标簽多定義了一個name屬性 其實這個name屬性和id屬性是完全一樣的都可以定位元素

如果不是表單元素 就算你加了name屬性getelementsbyname也取不到不信你自己試試.

由于本人能力有限,希望朋友們能夠及時的指出不正确的地方并及時留言我好修正,本人萬分感謝!

======================================================

在最後，我邀請大家參加新浪APP，就是新浪免費送大家的一個空間，支援PHP+MySql，免費二級域名，免費域名綁定 這個是我邀請的位址，您通過這個連結注冊即為我的好友，并獲贈雲豆500個，價值5元哦！短網址是http://t.cn/SXOiLh我建立的小站每天訪客已經達到2000+了，每天挂廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/