【金秋打卡】第17天 前端面试技能拼图2

课程名称：2周刷完100道前端优质面试真题
课程章节：第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
主讲老师：双越

课程内容：

今天学习的内容包括：
4-13 -HTMLCollection和NodeList有什么区别——HTMLCollection是Element的集合，NodeList是Node的集合。

课程收获：

Node 和 Element

• DOM是一棵树，所有节点都是Node
• Node是 Element的基类
• Element是其他HTML元素的基类，如HTMLDivElement

class Node {}

// document
class Document extends Node {}
class DocumentFragment extends Node {}

HTMLCollection 和 NodeList

• HTMLCollection是Element的集合
• NodeList是 Node集合

划重点

• 获取Node和Element的返回结果可能不一样
• 如elem.childNodes和elem.children不一样
• 前者会包含Text和Commeht节点，后者不会

扩展:类数组->数组

• HTMLCollection 和 NodeList都不是数组，而是“类数组”

const arr1 = Array.from( list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]

tips

• Document Fragment：批量操作DOM，例如一次性插入10个 p 标签
• 数据类型：静态还是动态，不是取决于数据类型，而是取决于 API

今天的 学习了 HTMLCollection和NodeList有什么区别，共同点为：都是类数组，不同点为：内容有所差异，具体可看API。

下一步就是 学习 Vue中computed和watch有什么区别。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​​​​​​​
​​​

​