节点对象都是单个节点,但是有时会需要一种数据结构,能够容纳多个节点。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. Enlisting multiple 1-phase aware participants in the same transaction

    In some cases it may be necessary to enlist participants that aren't two-phase commit aware into a t ...

  2. JavaWeb学习总结-04 Servlet 学习和使用

    一 Servlet 1 Servlet概念 Servlet时运行在服务器端的Java程序. Servlet的框架核心是 javax.servlet.Servlet 接口. 所有自定义的Servlet都 ...

  3. Saltstack 介绍、安装、配置(一)

    Slatstack 介绍 官网:https://saltstack.com/ 官方源:http://repo.saltstack.com/  (介绍各操作系统安装方法) http://repo.sal ...

  4. 随便聊聊 SOA & SOAP & WebService 的一些东西,以及客户端开发的代码逻辑解析

    http://blog.csdn.net/hikaliv/article/details/6459779 一天的时间调通了一个 WebService 的 Java 端的 C/S.一个 Android  ...

  5. sudo和rpm命令

    sudo是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具,如halt,reboot,su等等.这样不仅减少了root用户的登录 和管理时间,同样也提高了安全 ...

  6. Axure7.0汉化方法

    下载汉化包 AxureRP7CN_汉化包.rar 首先退出正在运行中的 Axure (如果您正在使用). 将 汉化包.rar 文件解压, 得到 lang 文件夹,  然后将其复制到 Axure 安装目 ...

  7. Oralce配置正确,报监听错误或无法识别描述中的服务

    出差客户现场,修改过网络配置,回来后本地虚拟机的Oracle数据库就不能登陆了 报监听错误,在服务器中使用Net Configration Assistant删除以前的,重新配置新的,还是不行,重启系 ...

  8. Marshal

    https://msdn.microsoft.com/en-us/library/aa288468(v=vs.71).aspx http://tomosoft.jp/design/?p=4647 ht ...

  9. Yii2提交表单提示无法验证

    yii2使用gii生成的搜索视图里的表单使用的是get方式,我改为post就提示无法验证,以为是控制器默认访问是get,实际默认是get和post都可以 public function behavio ...

  10. 数据库逆向框架代码生成工具:MyBatis Generator的使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...