打印

SD9012: IE6 IE7 IE8 中 getElementsByName 方法的参数不区分大小写

作者:孙东国

标准参考

document.getElementsByName(elementName) 方法是 HTMLDocument 接口提供的方法,该方法传入的参数应该是目标元素的 name 属性的值:

NodeList getElementsByName(in DOMString elementName);

目标元素的 name 是一个大小写敏感的字符串,仅 BUTTON, TEXTAREA, APPLET, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM, META 元素允许有 name 属性1,并且 name 属性可以不是唯一的。

关于 getElementsByName 方法的详细信息,请参考 DOM-1-HTML Interface HTMLDocument 中的相关内容。

关于元素的 name 属性的详细信息,请参考 HTML 4.01 Index of Attributes 中的内容。

注:
1. 在 IE 中,只有这些标签有 'name' 属性时,可以使用 document.getElementsByName(elementName) 方法获取他们创建的 DOM 元素,但在其他浏览器中,有 'name' 属性的其他标签也可以用这种方法获取。即 <DIV name='test'><DIV> 可以在其他浏览器中通过使用 document.getElementsByName('test')[0] 来获取,但在 IE 中却不行,得到的将是 undefined。

问题描述

使用 document.getElementsByName 方法获取页面内的元素时,在 IE6 IE7 IE8 中的 name 是大小写不敏感的。

造成的影响

如果作为参数的 name 和目标元素的实际 name 的大小写不匹配,在某些浏览器中将无法获取该元素或者得到的元素与预计得到的元素不一致。

受影响的浏览器

IE6 IE7 IE8

问题分析

分析以下代码:

<input name="aa" type="text" value="input1"/>
<input name="aA" type="text" value="input2"/>
<input name="Aa" type="text" value="input3"/>
<script type="text/javascript">
  alert(document.getElementsByName("AA").length);
  alert(document.getElementsByName("aa").length);
</script>

以上代码中,目标元素的 name 分别为 'aa','aA' 和 'Aa',但在传入 document.getElementsByName 时的参数分别为 'AA' 和 'aa',在严格区分大小写的情况下,仅 document.getElementsByName("aa") 能获得一个 INPUT 元素。

在各浏览器输出如下:

IE6 IE7 IE8 其他浏览器
3 3 0 1

可见:在 IE6 IE7 IE8 中,使用 document.getElementsByName 获取页面元素时,不区分参数的大小写。

解决方案

在使用 document.getElementsByName 方法获取页面元素时,应保证作为参数的 name 与目标元素的实际 name 值完全一致。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6
Chrome 6.0.472.25 dev
Safari 5.0
Opera 10.60
测试页面: getElementsByName.html
本文更新时间: 2010-07-09

关键字

getElementByName name 大小写