节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点。DOM提供两种接口,用于部署这种节点的集合分别是NodeList和HTMLCollection

MDN上的定义:

NodeList:

  NodeList对象是通过Node.childNodes和document.querySelectorAll方法返回的(collections of nodes)节点的集合, NodeList一般是动态集合live collection,

是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新,但是querySelectorAll方法返回的是静态的集合。

HTMLCollection

  HTMLCollection 接口表示一个包含了元素(元素顺序为文档流中的顺序)的通用集合(generic collection),实现该接口的集合只能包含 HTML 元素

  HTML DOM 中的 HTMLCollection 是即时更新的(live);当其所包含的文档结构发生改变时,它会自动更新。

  W3C标准的定义:

Interface NodeList:

[ArrayClass]
interface NodeList {
getter Node? item(unsigned long index);
readonly attribute unsigned long length;
};
A NodeList object is a collection of nodes. Interface HTMLCollection interface HTMLCollection {
readonly attribute unsigned long length;
getter Element? item(unsigned long index);
getter Element? namedItem(DOMString name);
};
An HTMLCollection object is a collection of elements.

两者的主要差距一个是node节点集合一个是html和元素集合,都是随着DOM树的改变实时更新的。HTMLCollection多了一个namedItem方法。

NodeList:

  属性:length。

    返回NodeList中的Node节点数量。

  方法:item ( idx )

    返回通过索引找到的元素,超过范围返回null。也可以通过数组括号加上索引来访问,超出范围返回undefined。

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
child_nodes.length;       // let's assume "2"
parent.appendChild(document.createElement('div'));
child_nodes.length;       // should output "3"

  动态的集合,注意querySelectorAll返回的是静态集合。

    注意:虽然可以通过下标访问元素但是,NodeList不是数组。

  数组的原型链:

myArray --> Array.prototype --> Object.prototype --> null

  NodeList的原型链:

myNodeList --> NodeList.prototype --> Object.prototype --> null

 

HTMLCollection:

  属性:

    HTMLCollection.length 只读

    返回集合当中子元素的数目。

  

  方法:

    HTMLCollection.item()
    根据给定的索引(从0开始),返回具体的节点。如果索引超出了范围,则返回 null。

    HTMLCollection.namedItem(id)比NodeList多出来的方法。
    根据 Id 返回指定节点,或者作为备用,根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖,并且只有当被引用的元素支持 name 属性时才能被匹配。如果不存在符合给定 name 的节点,则返回 null。

var elem1, elem2;

// document.forms 是一个 HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0); alert(elem1 === elem2); // 显示 "true" elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm"); alert(elem1 === elem2); // 显示 "true"

    

  返回HTMLCollection的方法

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names); //elements 是查找到的所有元素的集合 HTMLCollection .
//names 是一个字符串,表示用于匹配的 class 名称列表; class 名称通过空格分隔
//getElementsByClassName 可以在任意的元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素. var elements = document.getElementsByTagName(name); //elements is a live HTMLCollection (but see the note below) of found elements in //the order they appear in the tree.
//name is a string representing the name of the elements. The special string "*" //represents all elements. 其他document.links、document.images、document.anchors、

  返回NodeList

elements = document.getElementsByName(name);

//elements is an live NodeList Collection
//name is the value of the name attribute of the element. elementList = document.querySelectorAll(selectors); //elementList is a non-live NodeList of element objects.
//selectors is a string containing one or more CSS selectors separated by commas. var matches = document.querySelectorAll("div.note, div.alert"); //This example returns a list of all div elements within the document with a class of //either "note" or "alert":

  

javascript高级程序设计---NodeList和HTMLCollection的更多相关文章

  1. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  2. JavaScript高级程序设计(第三版)学习,第一次总结

    Array类型 var arr = []; arr.length; //返回数组元素个数 改变length可以动态改变数组大小 检测数组 instanceof可以检测某个对象是否是数组,限制:只能是一 ...

  3. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  4. 读书笔记(03) - 性能 - JavaScript高级程序设计

    作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...

  5. 《JavaScript高级程序设计(第3版)》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

  6. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  7. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  8. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  9. 阅读摘录《javascript 高级程序设计》01

    前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...

随机推荐

  1. Alpha版本十天冲刺——Day 9

    站立式会议 会议总结 队员 今日完成 问题 明日要做 感想 对学长说的话的感受 鲍亮 无 获取图片未解决 获取图片,发帖接口,争取完成此版本预期功能 不知不觉只剩两天时间了,这两天接连遇到发图片,获取 ...

  2. 二项分布和Beta分布

    原文为: 二项分布和Beta分布 二项分布和Beta分布 In [15]: %pylab inline import pylab as pl import numpy as np from scipy ...

  3. 【Alpha】Phylab2.0: Postmortem

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 主要解决同学们写物理实验报告时,处理数据的困难--巨大的计算量和不规范的物理报告数据处理格式.典型 ...

  4. mysql 生成排名字段

    假设有test表,下图为表机构和数据,score表示积分.现在要查询积分排名为第几的id?? 查询语句 select id,score,(@rowno:=@rowno+1) as rowno from ...

  5. 《Java疯狂讲义》(第3版)学习笔记 2 - Java语言的运行机制

    内容 1.高级语言的运行机制 2.Java 语言的运行机制 1.高级语言的运行机制 高级语言主要分为编译型语言和解释型语言两类. 编译型语言是指使用专门的编译器.针对特定平台(操作系统)将高级语言源代 ...

  6. sql 时间查询 /sql中判断更新或者插入/查询一年所有双休日

    ') update [DBPersonnel].[dbo].[TB証明書] ' else INSERT INTO [DBPersonnel].[dbo].[TB証明書] ([社員番号],[身分証明書] ...

  7. Unreal模型文件调查

    http://en.wikipedia.org/wiki/UE_Viewer http://www.gildor.org/en/projects/umodel http://wiki.beyondun ...

  8. 【转】【Java】利用反射技术,实现对类的私有方法、变量访问

    java关于反射机制的包主要在java.lang.reflect中,structs,hibernate,spring等框架都是基于java的反射机制. 下面是一个关于利用java的反射机制,实现了对私 ...

  9. LSM存储模型

    LSM存储模型 数据库有3种基本的存储引擎: 哈希表,支持增.删.改以及随机读取操作,但不支持顺序扫描,对应的存储系统为key-value存储系统.对于key-value的插入以及查询,哈希表的复杂度 ...

  10. Lua 之面向对象编程

    Lua 之面向对象编程 Lua并不是为面向对象而设计的一种语言,因此,仅从原生态语法上并不直接支持面向对象编程,但Lua的设计中仍然包含了很多面向对象的思想,理解它们也更有助于理解Lua自身的一些高级 ...