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

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

但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如:
None.gif < script type = " text/javascript " >
ExpandedBlockStart.gifContractedBlock.gif    
function  useGetElementsByNameWithId(id)  dot.gif {
InBlock.gif        
var eles = document.getElementsByName('ID_A');
InBlock.gif        
var msg = '使用 getElementsByName 传入 ID:得到:'
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(eles.length > 0dot.gif{
InBlock.gif            msg 
+= " Name " + eles[0].id;
ExpandedSubBlockEnd.gif        }

InBlock.gif        alert(msg);
ExpandedBlockEnd.gif    }

ExpandedBlockStart.gifContractedBlock.gif    
function  usegetElementByIdWithName(name)  dot.gif {
InBlock.gif        
var ele = document.getElementById(name);
InBlock.gif        
var msg = '使用 getElementById 传入 Name 得到:';
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(ele) dot.gif{
InBlock.gif            msg 
+= " ID " + ele.id;
ExpandedSubBlockEnd.gif        }

InBlock.gif        alert(msg);
ExpandedBlockEnd.gif    }

None.gif    
</ script >
None.gif < input  id ="ID_A"  name ="Name_A"  type ="button"  value ="使用 getElementsByName 传入 ID"  onclick ="useGetElementsByNameWithId(this.id)"   />
None.gif    
< input  id ="ID_B"  name ="Name_B"  type ="button"  value ="使用 getElementsByName 传入 Name"  onclick ="usegetElementByIdWithName(this.name)"   />
IE中通过 getId 传入 name 同样可以访问到目标元素,而通过 getName 传入 Id 也可以访问到目标元素。
MSDN中对两个方法的解释:
None.gif getElementById Method
None.gif
None.gif--------------------------------------------------------------------------------
None.gif
None.gifReturns a reference to the first object with the specified value of the ID attribute.
None.gif

None.gif Remarks
None.gif
None.gifWhen you use the getElementsByName method
,  all elements in the document that have the specified NAME or ID attribute value are returned.
None.gif
None.gifElements 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.
None.gif

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
None.gif          < asp:radiobuttonlist  id ="RadioButtonList1"  runat ="server" >
None.gif        
< asp:listitem > opt1 </ asp:listitem >
None.gif        
< asp:listitem > opt2 </ asp:listitem >
None.gif        
< asp:listitem > opt3 </ asp:listitem >
None.gif        
</ asp:radiobuttonlist >
HTML:
None.gif < table  id ="RadioButtonList1"  border ="0" >
None.gif    
< tr >
None.gif        
< td >< input  id ="RadioButtonList1_0"  type ="radio"  name ="RadioButtonList1"  value ="opt1"   />< label  for ="RadioButtonList1_0" > opt1 </ label ></ td >
None.gif    
</ tr >< tr >
None.gif        
< td >< input  id ="RadioButtonList1_1"  type ="radio"  name ="RadioButtonList1"  value ="opt2"   />< label  for ="RadioButtonList1_1" > opt2 </ label ></ td >
None.gif    
</ tr >< tr >
None.gif        
< td >< input  id ="RadioButtonList1_2"  type ="radio"  name ="RadioButtonList1"  value ="opt3"   />< label  for ="RadioButtonList1_2" > opt3 </ label ></ td >
None.gif    
</ tr >
None.gif
</ table >

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

注:radiobuttonlist可以选择“流布局”呈现,同样会生成一个类似的外围<span/>来做为容器,也会产生这个问题。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值