|
|
但是對于document.getElementsByName 與document.getElementById 這個兩個方法，IE中是并沒有嚴格區分 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 同樣可以訪問到目標元素，而通過 getName 傳入 Id 也可以訪問到目標元素。
MSDN中對兩個方法的解釋：
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確實對 getElementsByName 方法做了說明：“具有指定 Name 或者 ID 屬性的元素都會返回”，但是
getElementById 方法卻沒有說明，然而內部實現同 getElementsByName 是一樣的。
而對于FF，看來更忠實W3C標準，上面的測試代碼是沒有辦法返回目標元素的。
W3C 中的相關信息：
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268
由于有這個問題，所以對ASP.NET 控件中諸如 radiobuttonlist checkboxlist，使用客戶端腳本通過getElementsByName訪問具有name屬性的成組對象時就要注意了，因為radiobuttonlist 默認會呈現一個table來包容這些radio，而這個table id 與這些radio的name時相同的，比如：
.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') 就是返回四個元素了，第一個元素是那個id為 RadioButtonList1 的table，
如果客戶端需要有這樣的script，也為代碼的跨瀏覽器帶來了的麻煩。
注：radiobuttonlist可以選擇“流布局”呈現，同樣會生成一個類似的外圍<span/>來做為容器，也會產生這個問題。
AspNet技術：document.getElementsByName和document.getElementById 在IE與FF中不同實現，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
