DOM 中 NodeList 和 HTMLCollection 类型的区别

在 DOM 中，NodeList 和 HTMLCollection 类型是两个常用的集合类型。虽然它们都表示一组节点，但它们之间有一些区别。

NodeList 类型

NodeList 类型是一组节点的集合，通常由查询 DOM 树返回。它是一个类数组对象，它的每个元素都是一个 Node 类型的节点。NodeList 类型是只读的，不能直接修改其中的元素。

以下是 NodeList 类型的一些重要属性和方法：

• length：集合中节点的数量。
• item()：返回集合中指定位置的节点。
• [index]：返回集合中指定位置的节点。与 item() 方法类似。

使用 NodeList 类型时，您可以使用它的属性和方法来遍历和访问集合中的节点。例如，以下代码创建了一个 NodeList 对象，并遍历其中的节点：

var nodeList = document.getElementsByTagName("div");
for (var i = 0; i < nodeList.length; i++) {
  console.log(nodeList[i]);
}

HTMLCollection 类型

HTMLCollection 类型是一组元素节点的集合，通常由查询 DOM 树返回。它是一个类数组对象，它的每个元素都是一个 Element 类型的元素节点。HTMLCollection 类型也是只读的，不能直接修改其中的元素。

以下是 HTMLCollection 类型的一些重要属性和方法：

• length：集合中元素节点的数量。
• item()：返回集合中指定位置的元素节点。
• [index]：返回集合中指定位置的元素节点。与 item() 方法类似。
• namedItem()：返回具有指定名称或 ID 的元素节点。

使用 HTMLCollection 类型时，您可以使用它的属性和方法来遍历和访问集合中的元素节点。例如，以下代码创建了一个 HTMLCollection 对象，并遍历其中的元素节点：

var elementList = document.getElementsByClassName("my-class");
for (var i = 0; i < elementList.length; i++) {
  console.log(elementList[i]);
}

NodeList 和 HTMLCollection 类型的区别

尽管 NodeList 和 HTMLCollection 类型都表示一组节点，但它们之间有一些重要的区别：

1. NodeList 类型包含所有类型的节点，例如元素节点、文本节点、注释节点等。而 HTMLCollection 类型仅包含元素节点。
2. NodeList 类型是 DOM 规范中定义的通用类型，它用于表示各种类型的节点集合。而 HTMLCollection 类型是 HTML 规范中定义的特定类型，它用于表示文档中的元素节点集合。
3. NodeList 类型和 HTMLCollection 类型都是只读的，不能直接修改其中的元素。但 NodeList 类型通常是动态的，即当 DOM 树发生变化时，NodeList 对象会自动更新。而 HTMLCollection 类型通常是静态的，即它们只包含文档加载时存在的元素节点，不会自动更新。
4. NodeList 类型和 HTMLCollection 类型都具有一些相似的属性和方法，例如 length、item() 和 [index]。但 HTMLCollection 类型还具有一个特有的方法 namedItem()，它可以根据元素的名称或 ID 返回元素节点。