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对象的更多相关文章

  1. HTMLCollection 对象和NodeList 对象

    获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象. HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ] ...

  2. querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别

    querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Elem ...

  3. HTMLCollection对象和NodeList对象

    前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...

  4. js中的类数组对象---NodeList

    动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...

  5. HTMLCollection 对象详解,以及为什么循环获取的dom合集操作可能会出现下标不正确的情况?

    有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了 比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassNam ...

  6. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  7. 170104、js内置对象与原生对象

    内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...

  8. JS 学习(四)对象

    对象 在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. ...

  9. JS搞基指南----延迟对象入门提高资料整理

    JavaScript的Deferred是比较高大上的东西,  主要的应用还是主ajax的应用,  因为JS和nodeJS这几年的普及,  前端的代码越来越多,  各种回调套回调再套回调实在太让人崩溃, ...

随机推荐

  1. Kafka运行环境优化实践

    Kafka高性能的特点及条件 Kafka是一个高吞吐量分布式消息中间件,并且提供了消息的持久化功能.其高可行有两个重要的特点: 利用了磁盘连续读写性能显著高于随机读写性能的特点 并发,将一个topic ...

  2. 前端 day 30 html 基础一

    前情提要: html基础一 一:html标签入门 1: 1 HTML结构 1)一个html文件有且只有一个html标签.这个就是HTML的根标签.2)一个HTML文件主要由两部分组成:文件头和文件体. ...

  3. 数据库中"DDL","DML","DCL"

    sql组成:DDL:数据库模式定义语言,关键字:createDML:数据操纵语言,关键字:Insert.delete.updateDCL:数据库控制语言 ,关键字:grant.removeDQL:数据 ...

  4. Python3模块: hashlib

    简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法. 在python3中已经废弃了md5和sha模块,简单说 ...

  5. phpqrcode 分别生成普通、带logo、带背景带logo二维码

    前提:下载好 phpqrcode 类库 1.生成普通二维码 //引入类库 include('phpqrcode/phpqrcode.php'); //二维码里面的链接地址 $url="htt ...

  6. POJ 2250

    #include <iostream> #include <stack> #define MAXN 150 #include <string> using name ...

  7. eclipse outline 中图标含义

    先说颜色:  绿色:public  黄色:protected  蓝色:no modifier  红色:private 再说形状:  实心:method  空心:variable  实心中间有字母C:c ...

  8. HDFS DATANODE 磁盘容量的最小值

    HDFS的DATANODE的剩余空间具体要到多大?关于这个问题,下面记录下对这个问题的调查 昨天,讨论群里面给出了一个异常: op@odbtest bin]$ hadoop fs -put ../tm ...

  9. 机器学习--Gradient Boosting Machine(GBM)调参方法详解

    一.GBM参数 总的来说GBM的参数可以被归为三类: 树参数:调节模型中每个决策树的性质 Boosting参数:调节模型中boosting的操作 其他模型参数:调节模型总体的各项运作 1.树参数 现在 ...

  10. wordcloud+jieba

    Wordcloud各参数含义 font_path : string #字体路径,需要展现什么字体就把该字体路径+后缀名写上,如:font_path = '黑体.ttf' width : int (de ...