文档章节

将HTMLCollection/NodeList/伪数组转换成数组

letjs_in
 letjs_in
发布于 2011/07/18 09:47
字数 340
阅读 102
收藏 1

这里把符合以下条件的对象称为伪数组
1,具有length属性
2,按索引方式存储数据
3,不具有数组的push,pop等方法


1,function内的arguments 。
2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
3,特殊写法的对象 ,如

1 var obj={};
2 obj[0] = "一";
3 obj[1] = "二";
4 obj[2] = "三";
5 obj.length = 3; 

它们不具有数组的一些方法如push, pop, shift, join等。有时候需要将这些伪数组转成真正的数组,这样可以使用push, pop等方法。以下是工具函数makeArray

01 var makeArray = function(obj){
02     return Array.prototype.slice.call(obj,0);
03 }
04 try{
05     Array.prototype.slice.call(document.documentElement.childNodes, 0)[0].nodeType;
06 }catch(e){
07     makeArray = function(obj){
08         var res = [];
09         for(var i=0,len=obj.length; i<len; i++){
10             res.push(obj[i]);
11         }
12         return res;
13     }
14 }

以下分别测试以上三种伪数组

01 //定义一个函数fun,内部使用makeArray将其arguments转换成数组
02 function fun(){
03     var ary = makeArray(arguments);
04     alert(ary.constructor );
05 }
06 //调用
07 fun(3,5);
08  
09  
10 //假设页面上有多个段落元素p
11 var els = document.getElementsByTagName("p");
12 var ary1 = makeArray(els);
13 alert(ary1.constructor);
14  
15  
16 //特殊的js对象(如jquery对象)
17 var obj={};
18 obj[0] = "一";
19 obj[1] = "二";
20 obj[2] = "三";
21 obj.length = 3;
22  
23 var ary2 = makeArray(obj);
24 alert(ary2.constructor);

本文转载自:http://www.cnblogs.com/snandy/archive/2011/03/12/1981583.html

letjs_in
粉丝 6
博文 17
码字总数 973
作品 0
深圳
程序员
私信 提问
将伪数组转换成数组

这里把符合以下条件的对象称为伪数组: 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法 如 1,function内的arguments 。 2,通过document.forms,Form.elements,S...

lsjane
2015/09/10
526
0
NodeList 和 HTMLCollection

NodeList 类数组对象 代表节点的集合 部分浏览器为NodeList加入了namedItem接口。 规范: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-536297177 HTMLCollection 类数组对象...

nswish
2015/02/22
148
0
JS 类数组对象(ArrayLike Object)的判断

定义 在《JavaScript权威指南》中是这样解释类数组对象的: 一种常常完全合理的看法把拥有一个数值length属性和对应非整数属性的对象看做一种类型的数组。 常见的类数组对象有函数中的argum...

chenBright
09/29
0
0
javascript实现string.format函数补遗

在上一篇中,自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了,又重新阅读了一遍Andrew的原文,在原文下面的评论中,赫然发现也有人早提出参数个数的问题,同样懒惰的...

嗯哼9925
2017/11/15
0
0
从DOM选择器的返回值说起

原文发布在我的独立博客上 ~: 从DOM选择器的返回值说起 抛开大大解放生产力的jQuery,使用JS获取元素要使用getElementById方法,或类似的getElementsByTagName, getElementsByClassName,g...

米小安
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 不要在领导修风扇的时候打开电扇

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Whats Up》 主唱妹子 Lina Perry 的嗓音实在太有力了,收放自如的自信才能唱出这么优秀的歌吧!#今日歌曲推荐# 《Whats Up》-...

小小编辑
今天
11
0
SpringBoot集成Elasticsearch并进行增删改查操作

一、创建工程 使用IntelliJ创建SpringBoot工程 SpringBoot版本为2.0.4 ElasticSearch为5.6.10 删掉蓝框中的文件(如上) 最后我们的目录结构(如下) 下面pom文件主要修改的是把spring boot从Int...

一字见心
今天
5
0
x001-版本介绍

python版本介绍 目前有2 和 3 有很多企业用的代码是2版本,随着技术的发展,以后用3的会成为大趋势 python3的安装 yum -y install wget gcc zlib-devel bzip2-devel openssl-devel ncurses-d...

侠客行之石头
今天
5
0
聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
6
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部