HTMLCollection 和 NodeList：隐藏在 JavaScript DOM 操作背后的奇妙世界

2024-02-08 21:29:14

前言

犹记得上回有一次面试的时候，被问到了 HTMLCollection 和数组的关系。当时，我心里想的是，HTML 中的集合和数组的关系，那解题就是说 Set 和数组的关系？于是……面试官当下立马就黑脸了。显然，我的回答和他想要听到的并不一致。

事后我进行了反思，意识到自己对 HTMLCollection 和 NodeList 的理解还是不够深入。于是我决定深入研究这两个集合对象，以便在未来的面试中不再出错。

在本文中，我们将深入探讨 HTMLCollection 和 NodeList 在 JavaScript DOM 操作中的作用，揭示它们之间的差异，以及如何巧妙利用这些集合对象来实现更强大的前端交互和操控。

HTMLCollection 和 NodeList 的渊源

在 JavaScript 的世界中，DOM（Document Object Model）是操控网页内容的重要桥梁。通过 DOM，我们可以轻松地获取、修改和操作网页中的元素。

而 HTMLCollection 和 NodeList 则是 DOM 中不可或缺的两个集合对象。它们都能够存储一组 DOM 元素，并提供了一些操作这些元素的方法。

存储元素的类型不同 ：HTMLCollection 只存储 HTML 元素，而 NodeList 可以存储任何类型的 DOM 元素，包括 HTML 元素、文本节点、注释节点等。
获取元素的方式不同 ：HTMLCollection 是通过 document.getElementsByTagName() 方法获取的，而 NodeList 可以通过 document.querySelectorAll() 方法获取。
操作方法不同 ：HTMLCollection 和 NodeList 提供了不同的操作方法。HTMLCollection 提供了 item() 方法和 namedItem() 方法，NodeList 提供了 forEach() 方法、item() 方法、entries() 方法等。
NodeList 是动态的，HTMLCollection 是静态的 ：在 DOM 树发生变化后，NodeList 将自动更新，而 HTMLCollection 不会。

掌握了 HTMLCollection 和 NodeList 的特性和差异后，我们就可以在前端开发中巧妙地利用它们来实现更强大的交互和操控。

以下是一些常见的用法：

获取页面中的所有元素 ：可以使用 document.getElementsByTagName("*") 方法获取页面中的所有元素，然后将其存储在 HTMLCollection 中。
获取页面中的所有段落 ：可以使用 document.querySelectorAll("p") 方法获取页面中的所有段落，然后将其存储在 NodeList 中。
遍历集合中的元素 ：可以使用 for 循环或 forEach() 方法遍历集合中的元素，并对每个元素进行操作。
修改集合中的元素 ：可以使用 item() 方法或索引属性来获取集合中的元素，然后使用 innerHTML、innerText 等属性来修改元素的内容。
删除集合中的元素 ：可以使用 remove() 方法来删除集合中的元素。