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

}

不要使用for…in循环去遍历NodeList实例对象，因为for…in循环会将非数字索引的length属性和下面要讲到的item方法，也遍历进去，而且不保证各个成员遍历的顺序。

ES6新增for…of循环，也可以正确遍历NodeList实例对象。

var list = document.querySelectorAll('input[type=checkbox]');

for(var item of list){

item.checked = true;

}

NodeList实例对象的item方法，接受一个数字索引作为参数，返回该索引对应的成员。如果取不到成员或者成员不合法，则返回null。

nodeItem = nodeList.item(index);

// 实例

var divs = document.getElementByTagName("div");

var secondDiv = divs.item(1);

上面代码中，由于数字索引从零开始计数，所以出去第二个成员，要使用数字索引1。

所有类似于数组的对象，都可以使用方括号运算符取出成员，多以一般情况下，都是使用下面的写法，而不使用item方法。

nodeItem = nodeList[index];

HTMLCollection对象

HTMLCollection实例对象与NodeList实例对象类似，也是节点的集合，返回一个类似数组的对象。document.links、document.forms、document.images等属性，返回都是HTMLColletion实例对象。

HTMLCollection与NodeList对象的区别有以下几点：

HTMLCollection实例对象的成员只能是Element节点，NodeList实例对象的成员可以包含其他节点。

HTMLCollection实例对象都是动态集合，节点的变化会实时反映在集合中。NodeList实例对象可以是动态集合。

HTMLCollection实例对象可以用id属性或者name属性引用节点元素，NodeList只能使用数字索引引用。

HTMLCollection实例的item方法，可以根据成员的位置参数(从0开始)，返回该成员。如果取不到成员挥着数字索引不合法，则返回null。

var c = document.images;

var img1 = c.item(1);

// 等价下面写法

var img1 = c[0];

HTMLCollection实例的nameItem方法蜂聚成员的ID属性或者name属性，返回该成员。如果没有对应的成员，则返回null。这个方法是NodeLsit实例不具有的。

// HTML代码为

//

var elem = document.forms.namedItem('myForm');

// 等价于下面的写法

var elem = document.forms['myForm'];

由于item方法和nameItem方法，都可以用方括号运算符代替，所以建议一律使用方括号运算符。

ParentNode接口,ChildNode接口

不同的节点除了继承Node接口以外，还会继承其他接口。ParentNode接口用于获取当前节点的Element子节点，ChildNode接口用于处理当前节点的子节点。（包含但不限于Element子节点）

ParentNode接口

ParentNode接口用于获取Element子节点。Element节点、Document节点和DocumentFragment节点，部署了ParentNode接口。凡是这三类节点，都具有一下四个属性，用于获取Element子节点。

children

children属性返回一个动态的HTMLCollection集合，由当前节点的所有Element子节点组成。

下面代码遍历指定节点的所有Element子节点。

if(el.children.length){

for(var i=0;i

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