NodeList 和 HTMLCollection 是两种不同类型的集合，它们都用于表示一组 DOM 元素，但它们之间有一些关键的区别。
1. NodeList
NodeList 是一种节点集合，可以包含各种类型的节点，不仅仅是元素节点。NodeList 可以是静态的，也可以是实时的。
- 静态
NodeList：使用querySelectorAll()方法返回的NodeList是静态的。这意味着即使 DOM 发生变化，NodeList的内容也不会改变。 - 实时
NodeList：某些方法（如childNodes）返回的NodeList是实时的。这意味着如果 DOM 发生变化，NodeList的内容也会自动更新。
2. HTMLCollection
HTMLCollection 是一种特殊的节点集合，只包含元素节点。HTMLCollection 是实时的，这意味着当 DOM 发生变化时，HTMLCollection 的内容会自动更新。
主要区别
-
节点类型：
NodeList可以包含各种类型的节点（元素节点、文本节点、注释节点等）。HTMLCollection只包含元素节点。
-
实时性：
NodeList可以是静态的（如querySelectorAll()返回的）或实时的（如childNodes返回的）。HTMLCollection总是实时的。
-
访问方式：
NodeList可以通过索引访问元素，并且支持forEach方法（在大多数现代浏览器中）。HTMLCollection可以通过索引访问元素，但不支持forEach方法。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="example">Div 1</div>
<div class="example">Div 2</div>
<div class="example">Div 3</div>
<p>Paragraph</p>
<script>
// 使用 querySelectorAll 返回静态 NodeList
var nodeList = document.querySelectorAll(".example");
console.log(nodeList); // 静态 NodeList
// 使用 getElementsByClassName 返回 HTMLCollection
var htmlCollection = document.getElementsByClassName("example");
console.log(htmlCollection); // 实时 HTMLCollection
// 使用 childNodes 返回实时 NodeList
var childNodes = document.body.childNodes;
console.log(childNodes); // 实时 NodeList
// 访问 NodeList 元素
nodeList.forEach(function(element) {
console.log(element.textContent);
});
// 访问 HTMLCollection 元素
for (var i = 0; i < htmlCollection.length; i++) {
console.log(htmlCollection[i].textContent);
}
// 修改 DOM
var newDiv = document.createElement("div");
newDiv.className = "example";
newDiv.textContent = "New Div";
document.body.appendChild(newDiv);
// 检查静态 NodeList
console.log(nodeList); // 仍然是3个元素
// 检查实时 HTMLCollection
console.log(htmlCollection); // 现在有4个元素
</script>
</body>
</html>
总结
NodeList可以包含各种类型的节点，可以是静态的或实时的，支持forEach方法。HTMLCollection只包含元素节点，总是实时的，不支持forEach方法。
