持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
🍕前言
看到这个题我们首先需要知道 HTMLCollection 和 NodeList 是什么？
HTMLCollection接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。
NodeList对象是一个节点的集合，是由Node.childNodes和document.querySelectorAll返回的。NodeList不是一个数组，是一个类似数组的对象(Like Array Object)。虽然NodeList不是一个数组，但是可以使用forEach()对其进行迭代。 还可以使用Array.from()将其转换为实际数组。在一些情况下，NodeList对象是一个实时集合，也就是说，如果文档中的节点树发生变化，则已经存在的实时NodeList对象也会随之变化。
🌺正文
🍊1.首先我们需要知道Node和Element的关系
DOM是一棵树，所有节点都是NodeNode是Element的基类Element是其他HTML元素的基类，如HTMLDivElement
如下展示一张思维导图帮助大家去理解：
上面这张图中的关系我们可以用下面的代码去展示
class Node {}
// Document
class Document extends Node {}
class DocumentFragment extends Node {}
// 文本和注释
class CharacterData extends Node {}
class Comment extends CharacterData {}
class Text extends CharacterData {}
// element
class Element extends Node {}
class HTMLElement extends Element {}
class HTMLDivElement extends HTMLElement {}
class HTMLInputElement extends HTMLElement {}
🥭2.HTMLCollection 和 NodeList
HTMLCollection是Element的集合NodeList是Node的集合
划重点：
- 获取
Node和Element的返回结果可能不一样- 如
elem.childNodes和elem.children不一样- 前者会包含
Text和Comment节点，后者不会
🍎3.拓展内容： 类数组转换为数组的三种方法
HTMLCollection 和 NodeList 都不是数组，而是类数组
const arr1 = Array.from(list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]
🧁文末
⏳
✨
👍
⭐️
✏️
