JavaScript 中 getElementsByName 与元素集合特性解析

getElementsByName 的浏览器兼容性差异

getElementsByName(name) 方法用于获取页面中所有拥有 name 属性的元素，但其在 IE 与标准浏览器中的表现存在差异。在 IE 浏览器中，该方法仅返回原本就自带 name 属性的表单类元素；而在标准浏览器中，它返回所有包含 name 属性的元素，包括人为添加的属性。因此，在 IE 中使用此方法无法获取人为添加 name 属性的元素，而标准浏览器则能完整获取所有带 name 属性的元素。

元素集合与数组的区别及转换

getElementsByName() 与 getElementsByTagName() 返回的均为元素集合，而非真正的数组。尽管在 Firebug 中使用 console.log() 打印时看似数组格式，但通过 Object.prototype.toString.apply(arr) 检查可知，其返回值为 “[object HTMLCollection]”而非 “[object Array]”。由于该集合无法直接调用数组的相关方法，通常需要将其转换为数组形式，以便像操作数组一样处理其中的元素。

该元素集合具备以下属性与方法：

1、元素索引（index）

2、元素集合的长度（length）

3、item() 方法：通过传入不同的索引值可以取得集合中相应的元素。IE 下没有此方法。

4、FF 中还有一个 namedItem(name) 方法，取得具有 name 属性的第一个元素。只有 FF 下有这个方法。

关于元素集合向数组形式的转换方法有很多种，大家可以在网上搜索一下就有很多。也可以到司图正美的这篇《js将类数组对象转换成数组对象》博文中学习一。

以下是一个数组转换的方法：

 
元素集合转数组的实现代码function makeArray(arr){
if(arr.item){
var len = arr.length;
var array = [];
while(len--){
array[len] = arr[len];
} 
return array;
} 
return Array.prototype.slice.call(arr);
} 

这是一个小例子，可以看一下转换后的结果：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>元素类数组与数组</title> <span id="preserve85d7c189f93544d4a971ad0748fffef3" class="wlWriterPreserve"></span> </head> <body> getElements()函数中定义了一个数组，其内容分别是1，2，3，4，5，6 <div name="test" style="width:200px; height:200px; background: red;"></div> <input type="text" name="test"> <input type="text" name="test"> <input type="button" name="test" value="test1"> <input type="button" name="test" value="test2"> <input type="button" onclick="getElements()" value="getElements"> </body> </html>