首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现

2012-09-25 
document.getElementsByName 、document.getElementById 在IE与FF中有着不同实现。 document.getElementsByN

document.getElementsByName 、document.getElementById 在IE与FF中有着不同实现。
 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中有着不同兑现document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现function useGetElementsByNameWithId(id)document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现{
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现var eles = document.getElementsByName('ID_A');
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现var msg = '使用 getElementsByName 传入 ID:得到:'
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现if(eles.length> 0)document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现{
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 msg+= " Name" + eles[0].id;
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 }
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 alert(msg);
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 }
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现function usegetElementByIdWithName(name)document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现{
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现var ele = document.getElementById(name);
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现var msg = '使用 getElementById 传入 Name 得到:';
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现if(ele) document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现{
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 msg+= " ID" + ele.id;
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 }
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 alert(msg);
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现 }
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现</script>document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现<inputid="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:radiobuttonlistid="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中有着不同兑现<tableid="RadioButtonList1" border="0">
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现<tr>
document.getElementsByName 、document.getElementById 在IE与FF中有着不同兑现<td><inputid="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><inputid="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><inputid="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/>来做为容器,也会产生这个问题。

 

 

 

 

 

 

 

使用document.getElementById(id)在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
这里要注意的是document.getElementById(id)它返回一是一个元素。

该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有getElementsByName() 方法返回的是元素的数组,而不是一个元素。所以导致他们的访问方式有一定的不同

热点排行