程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> document.getElementsByName和document.getElementById 在IE與FF中不同實現

document.getElementsByName和document.getElementById 在IE與FF中不同實現

編輯:ASP.NET基礎
對於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 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/>來做為容器,也會產生這個問題。
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved