js 对象数组遍历 DOM 模型概述(7)

这两个对象都是构造函数。

typeof NodeList // "function"

typeof HTMLCollection // "function"

但是，一般不把它当做函数使用，甚至都没有直接使用它们的场合。主要是许多DOM属性和方法，返回的结果是NodeList实例或HTMLCollection实例，所以一般只使用它们的实例。

NodeList对象

NodeList实例对象是一个类似数组的对象，它的成员是节点对象。Node.childNodes、document.querySelectorAll()返回的都是NodeList实例对象。

document.childNodes instanceof NodeList // true

NodeList实例对象可能是动态集合，也可能是静态集合。所谓动态及喝酒而是一个活的集合，DOM树删除或新增一个相关节点，都会反映在NodeList接口之中。Node.childNodes返回的，就是一个动态集合。

var parent = document.getElementById('parent');

parent.childNodes.length // 2

parent.appendChild(document.createElement('div'));

parent.childNodes.length // 3

上面代码中，parent.childNodes返回的是一个NodeList实例对象。当parent节点新增一个子节点以后，该对象的成员个数就增加1。

document.querySelectorAll方法返回的是一个静态集合。DOM内部的变化，并不会实时反映在该方法的返回结果之中。

NodeList接口实例对象提供length属性和数字索引，因此可以像数组那样，使用数字索引取出每个节点，但是他本身并不是数组，不能使用pop或push之类数组特有的方法。

// 数组的继承链

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

// NodeList的继承链、

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

从上面的继承链可以看到，NodeList实例对象并不是继承Array.prototype，因此不具有数组的方法。如果要在NodeList实例对象使用数组方法，可以将NodeList实例转为正真的数组。

var div_list = document.querySelector('div');

var div_array = Array.prototype.slice.call(div_list);

注意，采用上面的方法将NodeList实例转换为真正的数组以后，div_array就是一个静态的集合了。不能再动态的反映DOM的变化。

另一种方法是通过call方法，间接在NodeList实例上使用数组方法。

var forEach = Array.prototype.forEach;

forEach.call(element.childNodes,function(child){

child.parentNode.style.color = '#0F0';

});

上面代码让数组的forEach方法在NodeList实例对象上调用。

遍历NodeList实例对象的首选方法，是使用for循环。

for(var i = 0;i

var item = myNodeList[i];

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-58611-7.html