节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点。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. Jacobian矩阵和Hessian矩阵

    1.Jacobian矩阵 在矩阵论中,Jacobian矩阵是一阶偏导矩阵,其行列式称为Jacobian行列式.假设 函数 $f:R^n \to R^m$, 输入是向量 $x \in R^n$ ,输出为 ...

  2. 【Beta】团队协作模式探讨试行

    概述 鉴于Alpha阶段松散的结构和低下的效率,以及Scrum会议时间过长.文档不到位.无标准化验收等问题,尝试对协作模式作一点变化. 依照课程压力等实际情况,以及按照贡献分分配原则,以一周为贡献分计 ...

  3. JAVASE 面试总结(1)

    1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"?Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码 ...

  4. webView(简单的浏览器)

    #import "MJViewController.h" @interface MJViewController () <UISearchBarDelegate, UIWeb ...

  5. Hadoop FS shell commands

    命令格式:hadoop fs -command -option args appendToFileUsage: hadoop fs -appendToFile <localsrc> ... ...

  6. Swift学习二

    // 定义枚举方式一 enum Season { // 每个case定义一个实例 case Spring case Summer case Fall case Winter } // 定义枚举方式二 ...

  7. php引用计数的基本知识

    每个php变量存在一个叫"zval"的变量容器中.一个zval变量容器,除了包含变量的类型和值,还包括两个字节的额外信息.第一个是"is_ref",是个bool ...

  8. 要引用这几个才有GetOwinContext与GetAutofacLifetimeScope

    using Owin; using Autofac; using Autofac.Integration.Owin; using System.Web; var owin = this.Request ...

  9. 解决umount.nfs: /data: device is busy 问题

    有时候我们需要umount某个挂载目录时会遇到如下问题: [root@localhost /]# umount /data/ umount.nfs: /data: device is busy 通过这 ...

  10. SaltStack安装篇

    一.基础介绍1.简介 salt 是一个基础平台管理工具 salt是一个配置管理系统,能够维护预定于状态的远程节点 salt是一个分布式远程执行系统,用来在远程节点上执行命令和查询数据 2.salt的核 ...