为了账号安全,请及时绑定邮箱和手机立即绑定

【金秋打卡】第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有什么区别。今天学习就先到这里吧。

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

​​​​​​​
​​​
https://img4.sycdn.imooc.com/636b60a50001277523101568.jpg

https://img1.sycdn.imooc.com/636b5bd40001bab523041581.jpg

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
1

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消