document.getElementsByName和document.getElementById 在IE與FF中不同實現(xiàn)
更新時間:2008年12月19日 13:19:15 作者:
今天在<asp:radiobuttonlist/>中使用教本的的時候才注意到原來 document.getElementsByName 、document.getElementById 在IE與FF中有著不同實現(xiàn)。
對于ID & Name 按最經(jīng)典的解釋的:“ID 就如同我們的身份證,Name就如同我們的名字”,也就是說,在一個html文檔中ID是唯一的,但是Name是可以重復(fù)的,就象我們的人名可以重復(fù)但是身份證確實全中國唯一的(PS:據(jù)說有重復(fù)的^_^)
但是對于document.getElementsByName 與document.getElementById 這個兩個方法,IE中是并沒有嚴格區(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 同樣可以訪問到目標元素,而通過 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 方法卻沒有說明,然而內(nèi)部實現(xiàn)同 getElementsByName 是一樣的。
而對于FF,看來更忠實W3C標準,上面的測試代碼是沒有辦法返回目標元素的。
W3C 中的相關(guān)信息:
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268
由于有這個問題,所以對ASP.NET 控件中諸如 radiobuttonlist checkboxlist,使用客戶端腳本通過getElementsByName訪問具有name屬性的成組對象時就要注意了,因為radiobuttonlist 默認會呈現(xiàn)一個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可以選擇“流布局”呈現(xiàn),同樣會生成一個類似的外圍<span/>來做為容器,也會產(chǎn)生這個問題。
但是對于document.getElementsByName 與document.getElementById 這個兩個方法,IE中是并沒有嚴格區(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 同樣可以訪問到目標元素,而通過 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 方法卻沒有說明,然而內(nèi)部實現(xiàn)同 getElementsByName 是一樣的。
而對于FF,看來更忠實W3C標準,上面的測試代碼是沒有辦法返回目標元素的。
W3C 中的相關(guān)信息:
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-26809268
由于有這個問題,所以對ASP.NET 控件中諸如 radiobuttonlist checkboxlist,使用客戶端腳本通過getElementsByName訪問具有name屬性的成組對象時就要注意了,因為radiobuttonlist 默認會呈現(xiàn)一個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可以選擇“流布局”呈現(xiàn),同樣會生成一個類似的外圍<span/>來做為容器,也會產(chǎn)生這個問題。
相關(guān)文章
基于.net4.0實現(xiàn)IdentityServer4客戶端JWT解密
這篇文章主要為大家詳細介紹了基于.net4.0實現(xiàn)IdentityServer4客戶端JWT解密,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-09
IIS故障(Connections_Refused)問題分析及處理
這幾天某地市Web服務(wù)器連續(xù)多次出現(xiàn)故障問題(Connections_Refused),正好借這個案例向大家詳細介紹下,需要了解的朋友可以參考下2012-12-12
Web.Config文件配置之限制上傳文件大小和時間的屬性配置
在Web.Config文件中配置限制上傳文件大小與時間字符串時,是在httpRuntime httpRuntime節(jié)中完成的,需要設(shè)置以下2個屬性:maxRequestLength屬性與ExecutionTimeout屬性,感興趣的朋友可以了解下,或許對你有所幫助2013-02-02
ASP.NET中readonly與const的區(qū)別詳解
如果你學過ASP.NET理論知識都會知道,在ASP.NET中 readonly和const修飾的變量都是恒量,它們的值是不可以被修改的。但是他們之間到底有什么區(qū)別?下面小編就它們的區(qū)別用例子來進行說明。2015-10-10
ASP.NET 使用application與session對象寫的簡單聊天室程序
寫了快一年的asp.net,application對象還真沒怎么用過??戳丝磿鶕?jù)這兩個對象的特性寫了一個簡單的聊天室程序。真的是非常的簡陋2014-07-07
.NET使用CsvHelper快速讀取和寫入CSV文件的操作方法
在日常開發(fā)中使用CSV文件進行數(shù)據(jù)導(dǎo)入和導(dǎo)出、數(shù)據(jù)交換是非常常見的需求,今天我們來講講在.NET中如何使用CsvHelper這個開源庫快速實現(xiàn)CSV文件讀取和寫入,需要的朋友可以參考下2024-06-06

