08-HTMLCollection-NodeList-区别.md

大厂前端面试题目|# 前端基础知识 HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。 ## 为何要考察 扎实的前端基础知识，是作为前端工程师的根本。基础知识能保证最基本的使用，即招聘进来能干活，能产出。 ## 考察的重点 - HTML CSS JS 基础知识 - HTTP Ajax 基础知识 - Vue 等框架的基本应用 ## 注意事项 不会从 0 基础讲起，基础不熟悉可以向讲师提问 ## 看几个面试题 列几个代表性的面试题，参考视频。 HTMLCollection和NodeList是前端开发中经常接触到的类数组对象，它们在DOM操作中扮演着重要的角色，对于开发者理解DOM结构和编写高效代码至关重要。接下来将从多个角度分析它们的定义、用途以及区别。 ### HTMLCollection和NodeList的定义 HTMLCollection是一个接口，它提供了对HTML元素集合的访问，可以看作是元素（Element）的数组。HTMLCollection是由一些获取DOM元素的API返回的，如`document.getElementsByTagName()`或者`elem.children`。这些方法返回的集合是实时更新的，也就是说，如果DOM结构发生变化，HTMLCollection中的元素也会相应地发生变化。 NodeList也是一个接口，它代表了文档中节点的集合。和HTMLCollection不同的是，NodeList不仅仅包含元素节点，还包括其他类型的节点，例如文本节点和注释节点。NodeList可以由诸如`document.childNodes`或者`document.querySelectorAll()`这类方法返回。通常情况下，NodeList不是实时更新的。 ### HTMLCollection和NodeList的用途 - **HTMLCollection**：由于HTMLCollection只包含元素节点，所以开发者可以很方便地访问和操作特定的元素，如通过id获取单个元素或通过标签名获取一组元素。这在需要对特定的元素集合进行操作时尤其有用。 - **NodeList**：由于NodeList包含所有类型的节点，它通常用于更精细的DOM操作。例如，如果你需要获取某个元素的所有子节点，无论它们是元素节点、文本节点还是注释节点，使用NodeList将是一个很好的选择。 ### HTMLCollection和NodeList的区别 1. **包含节点类型的不同**：HTMLCollection仅包含元素节点，NodeList可以包含元素节点、文本节点、注释节点等多种类型的节点。 2. **返回方法的差异**：返回HTMLCollection的方法通常关注元素节点，如`document.getElementsByTagName()`返回的是页面上所有指定标签名的元素组成的集合。而返回NodeList的方法则更为广泛，如`document.childNodes`可以获取一个元素的所有子节点，包括非元素节点。 3. **实时性差异**：HTMLCollection是实时的，意味着文档一旦发生变化，HTMLCollection中的内容也会立即更新。NodeList通常不是实时的，除非它是由诸如`document.querySelectorAll()`这类方法返回的，这会创建一个静态快照。 ### Node和Element的区别 - **Node**：节点是DOM树中的单个点，是所有DOM节点的基类。它是一个抽象接口，意味着不能直接实例化。Node提供了所有DOM节点共有的方法和属性，如`appendChild()`, `removeChild()`等。文本节点、注释节点和元素节点等都继承自Node。 - **Element**：元素是所有HTML元素的基类。它的实例是HTML文档中实际存在的元素，如`<div>`, `<span>`, `<img>`等。Element继承自Node，因此它包含Node的所有属性和方法，并添加了一些特有的属性和方法，如`className`, `id`, `style`等。 ### 类数组的HTMLCollection和NodeList HTMLCollection和NodeList都不是真正的数组，这意味着它们不支持数组所有的方法，如`push()`、`pop()`等。为了使用这些数组方法，通常需要将它们转换为真正的数组。可以使用以下三种方法之一来转换： ```javascript // 通过Array.from()方法 const arr1 = Array.from(list); // 通过Array.prototype.slice.call()方法 const arr2 = Array.prototype.slice.call(list); // 通过展开运算符 const arr3 = [...list]; ``` 以上就是HTMLCollection和NodeList的区别和相关知识点。理解它们的特点和用途，可以帮助开发者在实际开发中编写更加高效和准确的代码。对于前端开发人员来说，这些都是必须要掌握的基础知识，尤其是在准备技术面试时，掌握这些内容有助于在回答相关问题时展现出扎实的前端基础。