js-NodeList对象和HTMLCollection对象

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);

 

转载于:https://www.cnblogs.com/zczhangcui/p/6305680.html