HTML元素的ID和Name屬性的差異_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:42:25
原創
1368 人瀏覽過

今天對 有點疑惑, 加上#表示一個錨,後面跟上13,就會跳到本頁的13的位置,而這個1​​3就是Name屬性值。怎麼不
是ID值呢? ? ?所以查了下ID 和Name的區別,特記錄

最classical的答案:ID就像是一個人的身分證號碼,而Name就像是他的名字,ID顯然是唯一的,而Name是可以重複的。
顯然這個ID和Name的解答說的太籠統了,當然那個解釋對於ID來說是完全對的,它就是Client端HTML元素的Identity。而Name其實要複雜的多,因為Name有很多種的用途,所以它並不能完全由ID來代替,從而將其取消掉。具體用途有:
用途1: 作為可與伺服器互動資料的HTML元素的伺服器端的標示,例如input、select、textarea、和button等。我們可以在伺服器端根據其Name透過Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分組,我們知道radio button控制項在同一個分組類,check操作是mutex的,同一時間只能選取一個radio,而這個分組就是根據相同的Name屬性來實現的。
用途3: 建立頁面中的錨點,我們知道link是獲得一個頁面超級鏈接,如果不用href屬性,而改用Name,如:< ;a name="PageBottom">,我們就獲得了一個頁面錨點。
用途4: 作為物件的Identity,如Applet、Object、Embed等元素。例如在Applet物件實例中,我們將使用其Name來引用該物件。
用途5: 在IMG元素和MAP元素之間關聯的時候,如果要定義IMG的熱點區域,需要使用其屬性usemap,使usemap="#name"(被關聯的MAP
元素的Name )。
用途6: 某些特定元素的屬性,如attribute,meta和param。例如為Object定義參數或Meta中。
顯然這些用途都不是能簡單的使用ID來代替掉的,所以HTML元素的ID和Name的卻別並不是身份證號碼和姓名這樣的區別,它們更本來就是不同作
用的東西。
我們可以用一段程式碼來分析其中的微妙差異:

複製程式碼
程式碼如下:
複製程式碼


程式碼如下:


在IE瀏覽器裡,我們可以透過多少方法來索引到這個文字方塊物件? (為區別起見,我們把NAME和ID設為了不同的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all. demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

以上9種索引方法在IE6裡面全部透過傳回值測試,不過值得注意的是最後一種:在IE6裡,我把索引對象寫成document.getElementById('oDemo'),瀏覽器也能正確索引到對象,真是可怕的容錯性啊! !
接著問題來了,我們把這段程式碼放在Mozilla Firefox 1.0裡再執行一次,只有第7種方法返回“undefined”,其他的方法可以正確索引到對象,不過由於第3、4種方法用到了document.all這個IE專有對象,FF1.0雖然傳回了正確的值,但卻在控制台裡發出了警告:警告:非標準的屬性document.all。請使用 W3C 的標準形式 document.getElementById()

接下來我們把HTML文字類型定義得嚴格一點,在原始碼開頭加上:讓HTML文字依照HTML4.01標準去解析,在IE6裡照樣全部通過回傳值測試,不過在Mozilla Firefox 1.0裡麻煩就大了,第3、4種方法沒有任何的回傳值,而在控制台裡發出了報錯訊息:錯誤: document.all has no properties ,而第7種方法依舊回傳「undefined」。
小 結
NAME主要應用在互動式網頁,表單提交給某個伺服器端腳本後接收變處理量使用。從原始碼的規範性和相容性角度出發,如在客戶端腳本裡要索引某個對象,建議用
document.getElementById()
另外舉個簡單的例子:

使用者名稱:
密碼:

如果我要取得使用者名稱和密碼;JS用name取得的話,就得寫成document.form1.username.value;
document.form1.password.value;
用id取得:
docuement.getElementById("username");
docuement.getElementById("pwd");
有時候name 可能會出現相同的名字,所以這時候我們用name獲得就無法確定獲得的是哪個值了。
document.getElemntsByName("username");
這裡得到的是一個陣列
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!