HTMLCollection和NodeList的区别：前端面试基础知识

HTMLCollection 和 NodeList 的区别 在前端开发中，HTMLCollection 和 NodeList 是两个常用的概念，但它们之间有什么区别呢？在本文中，我们将详细探讨这两个概念的区别，并探索它们在实际开发中的应用。 HTMLCollection 和 NodeList 的定义 --------------------------- 在 DOM 中，Node 代表所有类型的节点，包括文档、元素、文本、注释、Fragment 等。而 Element 则是 HTML 元素的基类，继承于 Node。HTMLCollection 和 NodeList 都是集合类型，但它们的定义和应用有所不同。 HTMLCollection 是 Element 集合，它由获取 Element 的 API 返回，例如 `elem.children` 和 `document.getElementsByTagName('p')`。这些 API 都返回一个 HTMLCollection 对象，该对象包含了多个 Element。 NodeList 是 Node 集合，它由获取 Node 的 API 返回，例如 `document.querySelectorAll('p')` 和 `elem.childNodes`。这些 API 都返回一个 NodeList 对象，该对象包含了多个 Node。 HTMLCollection 和 NodeList 的区别 ----------------------------- 那么，HTMLCollection 和 NodeList 的主要区别是什么？答案是：HTMLCollection 是 Element 集合，NodeList 是 Node 集合。这意味着，HTMLCollection 只包含 Element，而 NodeList 可以包含所有类型的 Node，包括文本、注释和 Fragment 等。 在实际开发中，这一区别非常重要。例如，如果你使用 `elem.children` 获取一个元素的子元素，那么返回的是一个 HTMLCollection 对象，该对象只包含 Element。如果你使用 `elem.childNodes` 获取一个元素的子节点，那么返回的是一个 NodeList 对象，该对象包含了所有类型的 Node，包括文本、注释和 Fragment 等。 类数组（Array-like）特性 ------------------------- HTMLCollection 和 NodeList 都具有类数组特性，但它们都不是真正的数组。它们都有 length 属性，可以使用索引访问其成员，但它们不支持数组的所有方法，例如 push、pop、shift 等。如果你需要使用数组的方法，可以使用 Array.from() 方法将 HTMLCollection 或 NodeList 转换为数组。 例如： ```js const elems = document.getElementsByTagName('p'); const elemsArray = Array.from(elems); elemsArray.push(document.createElement('p')); // 可以使用 push 方法 ``` 结论 ---- HTMLCollection 和 NodeList 是两个不同的集合类型，HTMLCollection 是 Element 集合，NodeList 是 Node 集合。在实际开发中，了解这两个概念的区别非常重要，可以帮助你更好地使用 DOM API，提高开发效率。