DOM-NodeList对象介绍

DOM-NodeList对象代表了由文档中选择元素所返回的节点集合，是一个类数组对象。相比于单个元素对象，NodeList对象可以包含多个元素并提供了一些方便的方法。

获取NodeList对象

获取NodeList对象的方式通常有以下两种：

1. querySelectorAll方法

querySelectorAll方法可以按照CSS选择器的规则选择文档中的元素，并返回一个NodeList对象，如下：

const elements = document.querySelectorAll('p');
console.log(elements); // NodeList(3) [p, p, p]

2. 按照DOM树结构选择

通过原生的DOM方法选择元素时，如果选中的元素有多个，那么获取到的就是一个NodeList对象。举个例子：

const container = document.getElementsByClassName('container')[0];
const items = container.getElementsByTagName('li');
console.log(items); // NodeList(3) [li, li, li]

NodeList的方法和属性

1. 长度

与数组类似，NodeList对象也有length属性，表示对象中元素的个数。

console.log(elements.length); // 3

2. item方法

NodeList对象还有一个item方法，用于返回指定索引位置的元素。索引值从0开始。

console.log(elements.item(0)); // <p id="p1">Hello world.</p>

注：item方法跟数组的取值方法很类似，但还有一个差异就是当传入的参数为空值或undefined时，item方法会返回null，而数组的取值则是返回undefined。

3. forEach方法

由于NodeList对象是类数组对象，没有原生的forEach方法，但是我们可以使用Array原型链上的forEach方法来对所有元素进行遍历：

Array.prototype.forEach.call(elements, function(element, index) {
  console.log(element.innerHTML, index);
});

4. keys，values，entries方法

NodeList对象不仅可以遍历元素，还支持ES2015引入的 keys、values、entries 方法，基本使用方法跟 Array 类似，返回一个迭代器对象。

const iterator = elements.keys();
console.log(iterator.next()); // {value: 0, done: false}
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true,}

5. forEach，map，filter等方法

如果想使用ES6的forEach，map或filter等方法，可以通过将NodeList对象转换为数组，再使用数组上的方法来实现：

const arr = Array.prototype.slice.call(elements);
arr.forEach((item, index) => {
  console.log(item.innerHTML, index);
});

结论

NodeList对象是一个Web开发中常见的容器，它通常代表了一些元素的集合，提供了方便的方法来操作集合中的所有元素。虽然它本身并不是数组，但是可以通过一些技巧让它具备类似数组的所有特性。有了这些特性，我们可以更轻松地处理文档中的一些元素。