淺談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 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控制的關聯，  
   My "    type="text">  
   for屬性指定與label關聯的元素的id，不可用name替代。  
   2.    CSS的元素選擇機制，且以#MyId的方式指定應用樣式的元素，且不能以name取代。  
   3.    腳本中取得物件：  
   IE為在腳本中直接以id（而非name）來參考此id標識的物件。例如上面的input，要在腳本中取得輸入的內容，可以直接以

MyInput.value來取得。
   如果用DOM的話，則用document.getElementById("MyInput").value，如果要用name的話，通常先得到包含控制項的form，例如

document.forms[0]，然後從form再引用name，注意這樣得到的是經過計算後會傳送給伺服器的值。  

name與id的其他差異是：
   id要符合標示的要求，例如大小寫敏感，最好不要包含底線（因為不相容CSS）。而name基本上沒有什麼要求，甚至可以用數字

。

用CSS控制這個連結的停留樣式，
可以這樣寫 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}
NAME主要應用在互動式網頁，表單提交給某個伺服器端腳本後接收變處理量使用。從原始碼的規範性和相容性角度出發，如在客戶端

腳本裡要索引某個對象，建議用document.getElementById()方法，盡量不要直接使用NAME的值，當然如果不考慮相容性，以上9種方

法都可以在IE裡運行通過(IE5.0沒測試過)。

附：測試原始碼



     
 content="text/html; charset=gb2312" />
 content="text/html; charset=gb2312" />
 content="text/html; charset=gb2312" />
 ti /title>

    

    

    

    

    

    

    

    ['demoform '].childNodes[0].value)" />

    ['demoform'].elements[0].value)" />