NodeList 接口

NodeList 是 JavaScript Web API 中的一个接口，它表示一个有序集合的节点，这些节点是文档对象模型（DOM）的一部分。尽管 NodeList 对象可以通过索引来访问其成员，就像数组一样，但它并不是一个真正的数组（即不是 Array 类型的实例）。这意味着 NodeList 不拥有数组的所有方法，比如 push(), pop(), shift(), unshift(), splice() 等，这些都是数组（Array）对象特有的方法。

主要特性和用途

有序集合：NodeList 中的节点是按照它们在文档中出现的顺序排列的。
静态与动态：虽然 NodeList 通常是动态的（例如，通过 getElementsByTagName() 或 getElementsByClassName() 获取的），但也有一些情况下它是静态的，比如 parentNode.childNodes，它表示的是给定节点的子节点列表，这个列表在文档结构不发生变化的情况下是不会更新的。
索引访问：你可以通过索引（即位置，从 0 开始）来访问 NodeList 中的节点。
length 属性：NodeList 对象有一个 length 属性，表示集合中节点的数量。

转换为数组

由于 NodeList 并非真正的数组，你可能需要将其转换为数组以便使用数组的方法。这可以通过以下几种方式实现：

• 扩展运算符（...）：

let nodeList = document.getElementsByTagName('p');  
let array = [...nodeList];

• Array.from() 方法：

let nodeList = document.getElementsByTagName('p');  
let array = Array.from(nodeList);

• slice() 方法（注意，这是一种较老的方式，现在推荐使用扩展运算符或 Array.from()）：

let nodeList = document.getElementsByTagName('p');  
let array = Array.prototype.slice.call(nodeList);

示例

// 获取页面上所有的段落节点  
let paragraphs = document.getElementsByTagName('p');  
  
// 转换为数组  
let paragraphsArray = Array.from(paragraphs);  
  
// 使用数组的 forEach 方法遍历每个段落节点  
paragraphsArray.forEach(function(paragraph) {  
    console.log(paragraph.textContent);  
});  
  
// 或者，你也可以直接使用扩展运算符和 forEach（但这里 forEach 是在 Array.prototype 上定义的，所以需要先转换）  
[...paragraphs].forEach(paragraph => console.log(paragraph.textContent));

在这个示例中，我们首先获取页面上所有的段落节点（存储在 paragraphs 变量中，它是一个NodeList对象），然后将其转换为数组（存储在 paragraphsArray变量中），以便能够使用数组的 forEach 方法来遍历并打印出每个段落节点的文本内容。然而，我们也展示了如何直接使用扩展运算符和箭头函数来达到同样的目的，而无需显式地将NodeList转换为数组。