document.getElementsByName和document.getElementById 在IE與FF中不同實現
2024-07-10 13:20:58
供稿：網友
對于ID & Name 按最經典的解釋的：“ID 就如同我們的身份證，Name就如同我們的名字”，也就是說，在一個html文檔中ID是唯一的，但是Name是可以重復的，就象我們的人名可以重復但是身份證確實全中國唯一的（PS：據說有重復的^_^）
但是對于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 type="button" value="使用 getElementsByName 傳入 ID" />
<input type="button" value="使用 getElementsByName 傳入 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 中的相關信息：
#ID-26809268
由于有這個問題，所以對ASP.NET 控件中諸如 radiobuttonlist checkboxlist，使用客戶端腳本通過getElementsByName訪問具有name屬性的成組對象時就要注意了，因為radiobuttonlist 默認會呈現一個table來包容這些radio，而這個table id 與這些radio的name時相同的，比如：
.aspx
<asp:radiobuttonlist runat="server">
<asp:listitem>opt1</asp:listitem>
<asp:listitem>opt2</asp:listitem>
<asp:listitem>opt3</asp:listitem>
</asp:radiobuttonlist>HTML：
<table>
<tr>
<td><input type="radio" value="opt1" /><label for="RadioButtonList1_0">opt1</label></td>
</tr><tr>
<td><input type="radio" value="opt2" /><label for="RadioButtonList1_1">opt2</label></td>
</tr><tr>
<td><input type="radio" value="opt3" /><label for="RadioButtonList1_2">opt3</label></td>
</tr>
</table>
在IE中使用 document.getElementsByName('RadioButtonList1') 就是返回四個元素了，第一個元素是那個id為 RadioButtonList1 的table，
如果客戶端需要有這樣的script，也為代碼的跨瀏覽器帶來了的麻煩。
注：radiobuttonlist可以選擇“流布局”呈現，同樣會生成一個類似的外圍<span/>來做為容器，也會產生這個問題。
