今天在<asp:radiobuttonlist/>中使用教本的的时候才注意到原来 document.getElementsByName 、document.getElementById 在IE与FF中有着不同实现。
对于ID & Name 按最经典的解释的:“ID 就如同我们的身份证,Name就如同我们的名字”,也就是说,在一个html文档中ID是唯一的,但是Name是可以重复的,就象我们的人名可以重复但是身份证确实全中国唯一的(PS:据说有重复的^_^)

但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如:
document.getElementsByName & document.getElementById 在IE与FF中不同实现<script type="text/javascript">
>
document.getElementsByName & document.getElementById 在IE与FF中不同实现<input id="ID_A" name="Name_A" type="button" value="使用 getElementsByName 传入 ID" onclick="useGetElementsByNameWithId(this.id)" />
document.getElementsByName & document.getElementById 在IE与FF中不同实现    
<input id="ID_B" name="Name_B" type="button" value="使用 getElementsByName 传入 Name" onclick="usegetElementByIdWithName(this.name)" />
IE中通过 getId 传入 name 同样可以访问到目标元素,而通过 getName 传入 Id 也可以访问到目标元素。
MSDN中对两个方法的解释:
document.getElementsByName & document.getElementById 在IE与FF中不同实现getElementById Method
document.getElementsByName & document.getElementById 在IE与FF中不同实现
document.getElementsByName & document.getElementById 在IE与FF中不同实现--------------------------------------------------------------------------------
document.getElementsByName & document.getElementById 在IE与FF中不同实现
document.getElementsByName & document.getElementById 在IE与FF中不同实现Returns a reference to the first object with the specified value of the ID attribute.
document.getElementsByName & document.getElementById 在IE与FF中不同实现

document.getElementsByName & document.getElementById 在IE与FF中不同实现Remarks
document.getElementsByName & document.getElementById 在IE与FF中不同实现
document.getElementsByName & document.getElementById 在IE与FF中不同实现When you use the getElementsByName method
, all elements in the document that have the specified NAME or ID attribute value are returned.
document.getElementsByName & document.getElementById 在IE与FF中不同实现
document.getElementsByName & document.getElementById 在IE与FF中不同实现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.
document.getElementsByName & document.getElementById 在IE与FF中不同实现

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
document.getElementsByName & document.getElementById 在IE与FF中不同实现        <asp:radiobuttonlist id="RadioButtonList1" runat="server">
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<asp:listitem>opt1</asp:listitem>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<asp:listitem>opt2</asp:listitem>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<asp:listitem>opt3</asp:listitem>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
</asp:radiobuttonlist>
HTML:
document.getElementsByName & document.getElementById 在IE与FF中不同实现<table id="RadioButtonList1" border="0">
document.getElementsByName & document.getElementById 在IE与FF中不同实现    
<tr>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="opt1" /><label for="RadioButtonList1_0">opt1</label></td>
document.getElementsByName & document.getElementById 在IE与FF中不同实现    
</tr><tr>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="opt2" /><label for="RadioButtonList1_1">opt2</label></td>
document.getElementsByName & document.getElementById 在IE与FF中不同实现    
</tr><tr>
document.getElementsByName & document.getElementById 在IE与FF中不同实现        
<td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="opt3" /><label for="RadioButtonList1_2">opt3</label></td>
document.getElementsByName & document.getElementById 在IE与FF中不同实现    
</tr>
document.getElementsByName & document.getElementById 在IE与FF中不同实现
</table>

在IE中使用 document.getElementsByName('RadioButtonList1')  就是返回四个元素了,第一个元素是那个id为 RadioButtonList1 的table,
如果客户端需要有这样的script,也为代码的跨浏览器带来了的麻烦。

注:radiobuttonlist可以选择“流布局”呈现,同样会生成一个类似的外围<span/>来做为容器,也会产生这个问题。

相关文章:

  • 2021-08-13
  • 2022-01-13
  • 2022-12-23
  • 2022-12-23
  • 2021-10-13
  • 2021-06-03
  • 2021-11-03
  • 2021-11-08
猜你喜欢
  • 2021-09-20
  • 2022-12-23
  • 2022-12-23
  • 2022-02-17
  • 2022-12-23
  • 2022-02-05
  • 2022-12-23
相关资源
相似解决方案