document.getElementsByName和document.getElementById 在IE与FF中不同实现

所属分类: 网络编程 / ASP.NET 阅读数: 1398
收藏 0 赞 0 分享
对于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/>来做为容器,也会产生这个问题。
更多精彩内容其他人还在看

C#中Dictionary几种遍历的实现代码

C#中Dictionary几种遍历的实现代码,需要的朋友可以参考一下
收藏 0 赞 0 分享

C#实现EXCEL数据到TXT文档的转换

C#实现EXCEL数据到TXT文档的转换,需要的朋友可以参考一下
收藏 0 赞 0 分享

C#数据绑定控件中的DataSource属性浅谈

使用该属性指定用来填充Repeater控件的数据源。DataSource可以是任何System.Collections.IEnumerable对象, 如用于访问数据库的System.Data.DataView、System.Collections.ArrayList、Syste
收藏 0 赞 0 分享

ASP.Net开发常见的一些问题总结

ASP.Net开发常见的一些问题总结,需要的朋友可以参考一下
收藏 0 赞 0 分享

Log4net日志记录组件的使用步骤详解和下载

Log4net日志记录组件的使用步骤详解,需要的朋友可以参考一下
收藏 0 赞 0 分享

ASP.NET主机资源控制的一些心得

您可以通过以下设置控制ASP.NET主机对服务器内存的占用。并能设置ASP.NET主机进程定时重建这样可以避免服务器长时间运行aspnet占用大量空闲内存,有利于提高aspnet运行效率。
收藏 0 赞 0 分享

ADO与ADO.NET的区别与介绍

ADO与ADO.NET简介ADO与ADO.NET既有相似也有区别
收藏 0 赞 0 分享

Asp.Net各种超时问题总结

在数据库或者请求操作时,如果选择的时间段过短或操作数据量过大,就会遇到"请求超时"的的问题,网络上提供很多解决方案,但普遍不完善,根据个人经验及参考网络解决方案,先将其汇总
收藏 0 赞 0 分享

vs.net2008添加模板方法

vs.net2008添加模板方法,需要的朋友可以参考一下
收藏 0 赞 0 分享

Asp.net后台把脚本样式输出到head标签中节省代码冗余

最近在学习开发服务器控件,其它就少不了为控件注册js和css之类的资源文件,或者直接注册纯脚本样式。其中就遇到如下问题     1、 注册的资源文件或纯脚本样式在生成的页面中都不在head标签中(当然这个不影响页面功能)     2、 一个页面使用多个一样的控件时,会
收藏 0 赞 0 分享
查看更多