首頁 > web前端 > css教學 > 淺談html中id和name的區別實例代碼_經驗交流

淺談html中id和name的區別實例代碼_經驗交流

WBOY
發布: 2016-05-16 12:05:19
原創
1931 人瀏覽過

我們可以透過一段程式碼來分析其中的微妙差異:







在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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http://www.w3.org/TR/html4/loose.dtd">

使HTML文本依照HTML4.01標準去解析,在IE6裡照樣全部通過回傳值測試,不過在Mozilla Firefox 1.0裡麻煩就大了,第3、4種方法

沒有任何的回傳值,而在控制台裡發出了報錯訊息:錯誤: document.all has no properties ,而第7種方法依舊回傳“undefined

”。

小 結

name原來是為了識別之用,但現在根據規範,都建議用id來識別元素。

以下只能用name:  
   1.    表單(form)的控制名,且提交的資料都以控制項的name而非id控制。因為有許多name會同時對應多個控件,例如

checkbox和radio,而id必須是全文檔中唯一的。另外瀏覽器會根據name來設定傳送到伺服器的request。因此如果用id,伺服器是無

法得到資料的。  
   2.    frame和window的名字,用於在其他frame或window指定target。

以下只能用id:  
   1.    label與form控制的關聯,  
   
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板