浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined、Null、Boolean、Number、String)和复杂数据类型(1种:Object)。Object是ECMAScript中使用最多的一个类型,所有的引用类型的值都是Object类型的实例。引用类型,本质上是一种数据结构,用于将数据和功能组织在一起。对象是某个特定引用类型的实例。
在JavaScript中,有一种特殊的对象,被称为类数组(array-like)对象,其在书中的定义为:
- 拥有length属性,其它属性(索引)为非负整数
- 不具有数组所具有的方法
类数组示例:
1:
var a = {'1':'gg','2':'love','4':'meimei',length:5};
2:
var a= {}; for(var i=0; i<10 ; i++){
a[i] = i*i;
} a.length = i;
可以看出,通过将对象的每个属性名设为递增的非负整数,且动态定义一个length属性来表示元素个数,就可以使用对象来模拟数组。类数组对象可以像数组一样,使用[]通过下标访问。但它们终究只是类似数组,而不是数组,所以并不能使用数组的特有方法,如splice、indexOf、pop等。
类数组对象和数组的区别:
- 一个是对象,一个是数组
- 当新元素被添加时,数组的length属性的值会自动更新,类数组对象则不会
- 设置数组的length属性可扩展或截断数组,而对于类数组对象来说仅仅是改变了一个属性的值而已
- 类数组不能调用数组方法
类数组判断:
《javascript权威指南》上给出了代码用来判断一个对象是否属于“类数组”:
// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded
// with an additional o.nodeType != 3 test.
function isArrayLike(o) {
if (o && // o is not null, undefined, etc.
typeof o === 'object' && // o is an object
isFinite(o.length) && // o.length is a finite number
o.length >= 0 && // o.length is non-negative
o.length===Math.floor(o.length) && // o.length is an integer
o.length < 4294967296) // o.length < 2^32
return true; // Then o is array-like
else
return false; // Otherwise it is not
}
类数组转换:
有些时候,我们需要将一个类数组对象转换为一个真正的数组,转换之后可使用数组方法
Array.prototype.slice.call(Object)
对于IE9以前的版本(DOM实现基于COM),可以使用makeArray
来实现:
// 伪数组转化成数组
var makeArray = function(obj) {
if (!obj || obj.length === 0) {
return [];
}
// 非伪类对象,直接返回最好
if (!obj.length) {
return obj;
}
// 针对IE8以前 DOM的COM实现
try {
return [].slice.call(obj);
} catch (e) {
var i = 0,
j = obj.length,
res = [];
for (; i < j; i++) {
res.push(obj[i]);
}
return res;
}
};
常见类数组对象:
1.arguments
//属性:
length //长度
callee //正在执行的函数
arguments是最常见的类数组对象,在函数内部使用,示例:arguments[0] 或 functionName.arguments[0]
在JS的DOM中,有三个常用到的类数组对象:NodeList NamedNodeMap 和 HTMLCollection
2.NodeList
//属性:
length //长度 //方法:
item(idx) //通过索引访问节点
以下代码形式返回类型为NodeList:
childNodes
getElementsByClassName(className)
getElementsByTagName(tagName)
3.NamedNodeMap
//属性:
length //长度 //方法:
item(idx) //通过索引访问节点
getNamedItem(NS) //通过名称(和命名空间)访问节点
setNamedItem(NS) //通过名称(和命名空间)设置节点
removeNamedItem(NS) //根据名称(和命名空间)删除节点
以下代码形式返回类型为NamedNodeMap:
element.attributes
4.HTMLCollection
//属性:
length //长度 //方法:
item(idx) //通过索引访问节点
namedItem(name) //通过name 属性或 id 属性访问节点
以下代码形式返回类型为HTMLCollection:
document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.anchors //所有带name属性的a元素
document.forms //所有form元素
document.scripts //所有script元素
tBodies(table元素)
rows(table、tbody、thead、tfoot元素)
cells(tr元素)
HTMLCollection NodeList以及NamedNodeMap都是“动态的”,每当文档结构发生变化时,他们都会得到更新,始终会保存着最新,最准确的信息
浅谈JavaScript和DOM中的类数组对象的更多相关文章
- JavaScript中的类数组对象
在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"]; / ...
- JavaScript、ES6中的类和对象
面向对象可以用于描述现实世界的事物,但是事物分为具体的(特指的)事物和抽象的(泛指的)事物. 面向对象思维的特点: 1.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板) 2. ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- JavaScript类数组对象参考
JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
随机推荐
- jquery 表格行计算
表格行计算 总金额: function jisuanTrJinE(obj){ var curTab = $(obj).closest("table"); var curTr = $ ...
- Tomcat网页加载速度过慢的解决方法
可以vim conf/server.xml,在# OS specific support. $var _must_ be set to either true or false.下添加: JAVA_ ...
- linux查询进程号,出现两个进程
[root@ADM01B ~]# ps -ef|grep iesmgr root 5929 5321 0 09:38 pts/7 00:00:00 grep iesmgr root 9798 1 0 ...
- 2.如何修改apache的默认端口
打开apache的conf文件夹,找到server.xml,修改里面这段的port即可,重启apache,修改成功
- H5学习第一周
已经接触H5一个周了,经过学习,总算对H5有了一些了解和认知,下面就总结一下我对H5的认知和感悟. 首先接触的是H5的常用标签[meta],它有其以下常用属性 1.charset属性.单独使用,设置文 ...
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
消息队列NetMQ 原理分析4-Socket.Session.Option和Pipe 前言 介绍 目的 Socket 接口实现 内部结构 Session Option Pipe YPipe Msg Y ...
- accp8.0转换教材第11章JAjax加护扩展理解与练习
①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...
- 角点检测和匹配——Harris算子
一.基本概念 角点corner:可以将角点看做两个边缘的交叉处,在两个方向上都有较大的变化.具体可由下图中分辨出来: 兴趣点interest point:兴趣点是图像中能够较鲁棒的检测出来的点,它不仅 ...
- voa 2015 / 4 / 13
couch potato : someone who likes to spend a lot of time sitting or lying down while watching televis ...
- java获取mp3的时长和播放mp3文件
所需包为jaudiotagger-2.2.6-SNAPSHOT.jar和jl1.0.1.jar. import java.io.BufferedInputStream; import java.io. ...