JavaScript 数据元素集合与数组的区别说明

其中getElementsByName(name)方法是获取页面中所有具有name属性的元素，但这个方法在IE与标准浏览器中所取到的内容不一样。在IE中getElementsByName(name)方法所取到的元素是其本身就自带有name属性也就是form表单中所列出的所有元素（这些元素本身就自带有name属性）；标准浏览器中getElementsByName(name)方法所取到的元素是具有name属性的元素（本身就带有此属性+人为添加的此属性）。所以如果在IE浏览器中用此方法来获取页面中所有带有name的元素时，只能取出其自身本来就具有此属性的那些元素（表单类元素）而那些人为添加的name属性元素则不会被取出来；标准浏览器则不会这样，它会将页面中所有带name属性的元素全部取出。

getElementsByName()与getElementsByTagName()方法的共同之类是它们会把所取得的页面元素组成一个元素集合并非是数组（虽然用firebug中的console.log()打印出来时是数组的形式）。如果用Object.porototype.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);
}

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

元素类数组与数组

function getElements(){
var objArr = document.getElementsByName('test');
var arr = [1, 2, 3, 4, 5, 6];
var array;
alert('元素集合的长度: '+ objArr.length); // 在IE下元素集合中的个数不一样
alert('函数所定义的数组类型: '+ Object.prototype.toString.apply(arr))
for(var i in objArr){
alert('元素集合所拥有的属性和方法: '+i+' : '+ objArr[i]+ ' #### 属性和方法的类型：'+ Object.prototype.toString.apply(objArr[i]))
}
array = makeArray(objArr);
alert('集合转换成数组后的类型: '+ Object.prototype.toString.apply(array))
};
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);
}

getElements()函数中定义了一个数组，其内容分别是1，2，3，4，5，6

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JavaScript 数据元素集合与数组的区别说明

    其中getElementsByName(name)方法是获取页面中所有具有name属性的元素,但这个方法在IE与标准浏览器中所取到的内容不一样.在IE中getElementsByName(name)方法所取到的元素是其本身就自带有name属性也就是form表单中所列出的所有元素(这些元素本身就自带有name属性):标准浏览器中getElementsByName(name)方法所取到的元素是具有name属性的元素(本身就带有此属性+人为添加的此属性).所以如果在IE浏览器中用此方法来获取页面中所有

  • 浅谈java中集合的由来,以及集合和数组的区别详解

    浅谈java中集合的由来,以及集合和数组的区别详解

    对象多了用集合存,数据多了用数组存. 数组是固定长度的,集合是可变长度的. 集合是:只要是对象就可以存,不管是不是同一种对象 而数组只能存储一种类型的对象 下面是集合的框架: 以上就是小编为大家带来的浅谈java中集合的由来,以及集合和数组的区别详解的全部内容了,希望对大家有所帮助,多多支持我们~

  • Java集合和数组的区别

    集合和容器都是Java中的容器. 区别 数组特点:大小固定,只能存储相同数据类型的数据 集合特点:大小可动态扩展,可以存储各种类型的数据 转换 数组转换为集合: Arrays.asList(数组) 示例: int[] arr = {1,3,4,6,6}; Arrays.asList(arr); for(int i=0;i<arr.length;i++){ System.out.println(arr[i]); } 集合转换为数组: 集合.toArray(); 示例: List list = ne

  • Java集合与数组区别简介及相互转换实例

    数组Array和集合的区别: (1)数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型) (2)JAVA集合可以存储和操作数目不固定的一组数据.(3)若程序时不知道究竟需要多少对象,需要在空间不足时自动扩增容量,则需要使用容器类库,array不适用. 联系:使用相应的toArray()和Arrays.asList()方法可以回想转换. List和ArrayList的区别 1.List是接口,List特性就是有序,会确保以一定的顺序保存元素. ArrayList是它的实现类

  • jQuery与原生JavaScript选择HTML元素集合用法对比分析

    本文实例讲述了jQuery与原生JavaScript选择HTML元素集合用法.分享给大家供大家参考,具体如下: 通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName(部分浏览器不支持),可以返回HTMLCollection对象.表面上,它们与数组很类似,因为它们都包含length属性并且元素都可以通过[index]方式访问.然而,实际上它们并不是数组:诸如pus

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

  • javascript 删除数组元素和清空数组的简单方法

    javascript 删除数组元素和清空数组的简单方法 一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js

  • JavaScript通过join函数连接数组里所有元素的方法

    本文实例讲述了JavaScript通过join函数连接数组里所有元素的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript"> var days = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday&

  • JavaScript通过元素索引号删除数组中对应元素的方法

    本文实例讲述了JavaScript通过元素索引号删除数组中对应元素的方法.分享给大家供大家参考.具体分析如下: JavaScript通过元素的索引号删除数组中的元素,如果要删除第3个元素,则使用RemoveValByIndex(2)即可,JS数组从0开始 function RemoveValByIndex(arr, index) { arr.splice(index, 1); } test = new Array(); test[0] = 'Apple'; test[1] = 'Ball'; t

  • JavaScript使用slice函数获取数组部分元素的方法

    本文实例讲述了JavaScript使用slice函数获取数组部分元素的方法.分享给大家供大家参考.具体如下: JS数组带有一个slice方法,可以获取数组的指定部分,下面的代码获取数组中的第二个和第三个元素 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to extract the second and the third elements from the ar

随机推荐