javascript高级程序设计---NodeList和HTMLCollection

节点对象都是单个节点，但是有时会需要一种数据结构，能够容纳多个节点。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":