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

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

详解.NET中的加密算法总结(自定义加密Helper类续)

这篇文章主要介绍了详解.NET中的加密算法总结(自定义加密Helper类续) ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

详谈.NET的异常处理

本文在对异常的介绍中,主要介绍了CLR的异常处理机制,一些较为通用的异常代码,以及对Exception类的介绍。具有很好的参考价值,需要的朋友一起来看下吧
收藏 0 赞 0 分享

浅谈Main方法的参数

本文主要对Main方法的参数通过案例分析进行介绍,具有很好的参考价值,需要的朋友一起来看下吧
收藏 0 赞 0 分享

详解.net循环、逻辑语句块(基础知识)

本篇是介绍.NET 基础部分,主要简述循环,判断,对初学者具有很好的参考借鉴价值,下面就跟小编一起来看下吧
收藏 0 赞 0 分享

BaiduTemplate模板引擎使用示例(附源码)

本文主要分享了BaiduTemplate模板引擎使用示例,具有很好的参考价值,需要的朋友一起来看下吧
收藏 0 赞 0 分享

Asp.net中通过Button打开另一个的frm

本文通过实例代码给大家介绍了asp.net中通过button打开另一个frm的方法,非常不错,需要的朋友参考下吧
收藏 0 赞 0 分享

.NET framework 4.0 安装失败回滚问题

这篇文章主要介绍了.NET framework 4.0 安装失败回滚问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

.NET实现文件跨服务器上传下载的方法

这篇文章主要给大家介绍了.NET文件如何实现跨服务器上传下载的方法,文中通过图片介绍的很详细,相信对大家的理解和学习具有一定的参考借鉴价值,有需要的朋友们可以跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

ASP.NET操作MySql数据库的实例代码讲解

这篇文章主要介绍了ASP.NET操作MySql数据库的实例代码讲解,需要的朋友可以参考下
收藏 0 赞 0 分享

Asp.net Core 1.1 升级后操作mysql出错的解决办法

这篇文章主要介绍了Asp.net Core 1.1 升级后操作mysql出错的解决办法,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多