HTMLCollection 和 NodeList 的区别
最近我一直在使用 JavaScript 进行 DOM 操作，我发现可以通过类名以两种方式获取一组元素：
document.getElementsByClassName()；document.querySelectorAll()；
然而，它们之间并没有绝对的优劣之分，因为应该根据我们HTML的结构和实际需求来选择使用。但是！重要的是，我们必须考虑每种方法的输出结果，并理解它们的工作原理。
理论
根据 MDN 文档：
- getElementsByClassName()返回一个实时对象
HTMLCollection，表示具有给定类名的所有子元素的数组对象。 - querySelectorAll()返回一个静态（非实时）对象，
NodeList表示文档中与指定选择器组匹配的元素列表。
live HTMLCollection话虽如此，我还是忍不住问自己：a和 a到底是什么意思static NodeList？接下来，让我用更清晰的方式向你解释一下它们之间的区别。
动手实践
让我们来看一下下面的 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
</head>
<body>
<ul id="list">
<li class="item">First Item</li>
<li class="item">Second Item</li>
<li class="item">Third Item</li>
</ul>
<script src="script.js"></script>
</body>
</html>
item现在，让我们用上面提到的两种方法，通过类名获取项目：
我们可以看到，两者都包含了我在类中需要的所有元素item。然而，它们返回的数据结构却存在很大的差异。
现在，让我们<li>向列表中添加一个新元素，并向script.js文件中添加一些 JavaScript 代码。
//get UL element
const list = document.getElementById('list');
//Get items by class name (two ways)
const itemsByClassName = document.getElementsByClassName('item');
const itemsByQuerySelector = document.querySelectorAll('.item');
console.log('First console log', itemsByClassName, itemsByQuerySelector);
//adding the fourth element
list.innerHTML += `<li class="item">Fourth Item</li>`;
console.log('Second console log', itemsByClassName, itemsByQuerySelector);
让我们看看结果！
我们可以看到新项目已添加到列表中，但是，列表HTMLCollection已更新为第四个项目，而列表NodeList仍然包含前三个元素，它没有意识到我们的列表发生了变化。
HTMLCollection因此，这就是动态数据结构和静态数据结构之间的主要区别NodeList。首先，动态数据结构HTMLCollection会在每次检测到方法检索到的数据项发生变化时自动更新。另一方面，静态数据结构NodeList自执行之日起就保持不变，无论 HTML 代码发生何种变化。
结论
总而言之，您可以随意使用它们，但请考虑它们之间的巨大差异，以便根据您的需求决定哪一个更适合您。
更多信息，请查看以下资源：
感谢阅读！
文章来源：https://dev.to/jharteaga/difference- Between-htmlcollection-and-nodelist-25bp