對(duì)于ID & Name 按最經(jīng)典的解釋的：“ID 就如同我們的身份證，Name就如同我們的名字”，也就是說，在一個(gè)html文檔中ID是唯一的，但是Name是可以重復(fù)的，就象我們的人名可以重復(fù)但是身份證確實(shí)全中國唯一的（PS：據(jù)說有重復(fù)的^_^）
但是對(duì)于document.getElementsByName 與document.getElementById 這個(gè)兩個(gè)方法，IE中是并沒有嚴(yán)格區(qū)分 ID 與 Name 的，比如：
<script type="text/javascript">
function useGetElementsByNameWithId(id) {
var eles = document.getElementsByName('ID_A');
var msg = '使用 getElementsByName 傳入 ID：得到：'
if(eles.length > 0) {
msg += " Name " + eles[0].id;
}
alert(msg);
}
function usegetElementByIdWithName(name) {
var ele = document.getElementById(name);
var msg = '使用 getElementById 傳入 Name 得到：';
if(ele) {
msg += " ID " + ele.id;
}
alert(msg);
}
</script><input id="ID_A" name="Name_A" type="button" value="使用 getElementsByName 傳入 ID" onclick="useGetElementsByNameWithId(this.id)" />
<input id="ID_B" name="Name_B" type="button" value="使用 getElementsByName 傳入 Name" onclick="usegetElementByIdWithName(this.name)" />IE中通過 getId 傳入 name 同樣可以訪問到目標(biāo)元素，而通過 getName 傳入 Id 也可以訪問到目標(biāo)元素。
MSDN中對(duì)兩個(gè)方法的解釋：
getElementById Method
--------------------------------------------------------------------------------
Returns a reference to the first object with the specified value of the ID attribute.
Remarks
When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned.
Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.
MSDN確實(shí)對(duì) getElementsByName 方法做了說明：“具有指定 Name 或者 ID 屬性的元素都會(huì)返回”，但是
getElementById 方法卻沒有說明，然而內(nèi)部實(shí)現(xiàn)同 getElementsByName 是一樣的。
而對(duì)于FF，看來更忠實(shí)W3C標(biāo)準(zhǔn)，上面的測(cè)試代碼是沒有辦法返回目標(biāo)元素的。
W3C 中的相關(guān)信息：
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268
由于有這個(gè)問題，所以對(duì)ASP.NET 控件中諸如 radiobuttonlist checkboxlist，使用客戶端腳本通過getElementsByName訪問具有name屬性的成組對(duì)象時(shí)就要注意了，因?yàn)閞adiobuttonlist 默認(rèn)會(huì)呈現(xiàn)一個(gè)table來包容這些radio，而這個(gè)table id 與這些radio的name時(shí)相同的，比如：
.aspx
<asp:radiobuttonlist id="RadioButtonList1" runat="server">
<asp:listitem>opt1</asp:listitem>
<asp:listitem>opt2</asp:listitem>
<asp:listitem>opt3</asp:listitem>
</asp:radiobuttonlist>HTML：
<table id="RadioButtonList1" border="0">
<tr>
<td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="opt1" /><label for="RadioButtonList1_0">opt1</label></td>
</tr><tr>
<td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="opt2" /><label for="RadioButtonList1_1">opt2</label></td>
</tr><tr>
<td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="opt3" /><label for="RadioButtonList1_2">opt3</label></td>
</tr>
</table>
在IE中使用 document.getElementsByName('RadioButtonList1') 就是返回四個(gè)元素了，第一個(gè)元素是那個(gè)id為 RadioButtonList1 的table，
如果客戶端需要有這樣的script，也為代碼的跨瀏覽器帶來了的麻煩。
注：radiobuttonlist可以選擇“流布局”呈現(xiàn)，同樣會(huì)生成一個(gè)類似的外圍<span/>來做為容器，也會(huì)產(chǎn)生這個(gè)問題。

最新評(píng)論