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

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

运行page页面时的事件执行顺序及页面的回发与否深度了解

page页面时的事件执行顺序的了解对于一些.net开发者起到者尤关重要的作用;页面的回发与否会涉及到某些事件执行与不执行,在本文中会详细介绍,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Web.config(应用程序的配置信息)总结

Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中,接下来详细介绍一下配置情况,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

C#时间格式化(Datetime)用法详解

C#时间格式化Datetime.ToString参数format格式详细用法,本文将进行介绍,感兴趣的朋友可以了解下啊
收藏 0 赞 0 分享

实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上。此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样有演示动画,感兴趣的朋
收藏 0 赞 0 分享

Asp.net 图片文件防盗链(尊重劳动成果)及BeginRequest事件学习

关于图片盗链这个问题,毕竟是自己的劳动成功,很多人不希望别人就那么轻易地偷走了;反盗链的程序其实很简单,熟悉ASP.NET 应用程序生命周期的话很容易就可以写一个,运用HttpModule在BeginRequest事件中拦截请求就ok了
收藏 0 赞 0 分享

asp.net Grid 导出Excel实现程序代码

看了FineUI中的将Grid导出为Excel的实现方法,实际上是可以非常简单。看来很难的问题,变换一种思路就可以非常简单
收藏 0 赞 0 分享

使用C#处理WebBrowser控件在不同域名中的跨域问题

我们在做web测试时,经常会使用WebBrowser来进行一些自动化的任务而有些网页上面会用IFrame去嵌套别的页面,这些页面可能不是在相同域名下的,这时就会出现跨域问题,无法直接在WebBrowser中获取到IFrame中的元素,接下来介绍如何解决此问题,需要了解的朋友可以参
收藏 0 赞 0 分享

.NET 下运用策略模式(组合行为和实体的一种模式)

我简单的理解策略模式就是把行为(方法)单独的抽象出来,并采用组合(Has-a)的方式,来组合行为和实体的一种模式比如,.NET中对数组排序的Sort的方法就是一个策略模式的实现模板
收藏 0 赞 0 分享

使用Entity Framework(4.3.1版本)遇到的问题整理

在这里记录一下之前使用Entity Framework(4.3.1版本)遇到的问题:更新没有设置主键的表、更改Code-First的默认连接、检测字符串截断错误,需要的朋友可以参考下
收藏 0 赞 0 分享

Asp.net利用JQuery AJAX实现无刷新评论思路与代码

Asp.net利用JQuery AJAX实现无刷新评论,此功能是每一个从事asp.net开发者的朋友都希望实现的,本文利用闲暇时间整理了一些,有需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多