js-NodeList对象和HTMLCollection对象
getElementsByName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTMLCollection对象。
这些对象都是只读的类数组对象。它们有length属性,也可以像真正的数组一样索引(只是读而不是写)。可以对一个NodeList或HTMLCollection的内容用一下标准的循环进行迭代:
for(var i=0;i<document.images.length;i++)//循环所有图片
document.images[i].style.display="none";//隐藏它们
不能直接在NodeList和HTMLCollection集合上调用Array的方法,但可以间接地使用:
var content=Array.prototype.map.call(document.getElementsByTagName("p"),function(e){return e.innerHTML;});
HTMLCollection对象也有额外的命名属性,也可以通过数字和字符串来索引。
由于历史的原因,NodeList和HTMLCollection对象也都能当作函数:以数字或字符串为参数调用它就如同使用数字或字符串索引它们一样。不鼓励使用这种怪异的方式。
NodeList和HTMLCollection接口都不是为像JavaScript这样的动态语言设计的,它们都定义了item()方法,期望输入一个整数,并返回此索引处的元素。在JS中根本没有必要调用此方法,因为简单的使用数组索引就能替代。类似的,HTMLCollection定义了namedItem()方法,它返回指定属性名的值,但在JS中可以用数组索引或常规属性来访问。
NodeList和HTMLCollection对象不是历史文档状态的一个静态快照,而通常是实时的,并且当文档变化时它们所包含的元素列表能随之改变,这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName('div'),此时返回值是一个length为0的NodeList对象。如果再在文档中插入一个新的<div>元素,此元素将自动成为NodeList的一个成员,并且它的length属性变成1。
通常,NodeList和HTMLCollection的实时性非常有用。但是,如果要在迭代一个NodeList对象时在文档中添加或者删除元素,首先会需要对NodeList对象生成一个静态的副本:
var snapshot=Array.prototype.slice.call(nodelist,0);
js-NodeList对象和HTMLCollection对象的更多相关文章
- HTMLCollection 对象和NodeList 对象
获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象. HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ] ...
- querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别
querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...
- HTMLCollection对象和NodeList对象
前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...
- js中的类数组对象---NodeList
动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...
- HTMLCollection 对象详解,以及为什么循环获取的dom合集操作可能会出现下标不正确的情况?
有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了 比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassNam ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- 170104、js内置对象与原生对象
内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...
- JS 学习(四)对象
对象 在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. ...
- JS搞基指南----延迟对象入门提高资料整理
JavaScript的Deferred是比较高大上的东西, 主要的应用还是主ajax的应用, 因为JS和nodeJS这几年的普及, 前端的代码越来越多, 各种回调套回调再套回调实在太让人崩溃, ...
随机推荐
- MongoDB系统CentOS 7.1 crash的排障过程
[作者] 王栋:携程技术保障中心数据库专家,对数据库疑难问题的排查和数据库自动化智能化运维工具的开发有强烈的兴趣. [问题描述] 最近我们有多台MongoDB的服务器CentOS 7.1系统发生了cr ...
- android平台一些常用代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- Sublime Text 乱码解决(Package Control 和 ConvertToUTF8插件安装)
Sublime Text的界面正如她的名字sublime一样,充满极客感觉的高大上,而且拥有强大的功能.但是她默认是不支持GBK编码的. 本来安装一个Package Control插件管理,再安装其他 ...
- Swift循环遍历集合方法
第一种方式:for-in循环 OC延续了C语言的for循环,在Swift中被彻底改造,我们无法再使用传统形式的for循环了 遍历数组和字典: //遍历数组 let iosArray = [&quo ...
- 使用js栈stack类的实现
使用js栈stack类的实现 /*使用栈stack类的实现*/ function stack() { this.dataStore = [];//保存栈内元素,初始化为一个空数组 this.top = ...
- django框架--视图系统
目录 一.视图函数的理解 二.视图函数的定位 三.请求对象HttpRequest 四.响应对象HttpResponse 一.视图函数的理解 视图函数的作用是,对指定的url执行业务逻辑,视图函数将会作 ...
- android view知识点 总结
DecorView : http://www.jianshu.com/p/5aa96683d0dc 安卓事件分发机制: http://blog.csdn.net/guolin_blog/article ...
- java学习-java.lang.Math随机数生成
java中的随机数,java.lang.Math.random()和java.util.Random.nextDouble() Math.random()方法是生成0.0---1.0区域内的随机数,每 ...
- Hive文件存储格式和hive数据压缩
一.存储格式行存储和列存储 二.Hive文件存储格式 三.创建语句和压缩 一.存储格式行存储和列存储 行存储可以理解为一条记录存储一行,通过条件能够查询一整行数据. 列存储,以字段聚集存储,可以理解为 ...
- elasticsearch插件安装之--拼音插件
/** * vm12下的centos7.2 * elasticsearch 5.2.2 */ 有时在淘宝搜索商品的时候, 会发现使用汉字, 拼音, 或者拼音混合汉字都会出来想要的搜索结果, 今天找了一 ...