【学习打卡】第3天 构建前端知识体系 第三讲

课程名称：一天时间迅速准备前端面试 快速构建初级前端知识体系

课程章节：DOM and BOM

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. DOM 节点操作

2. DOM 结构操作

3. 如何优化 DOM 操作的性能

4. BOM 操作相关面试题

课程收获：

DOM 节点操作

• document.getElementById()：返回对拥有指定 id 的第一个对象的引用。

• document.getElementsByTagName()：返回带有指定标签名的对象集合。

• document.getElementsByClassName()：返回一个包含了所有指定类名的子元素的类数组对象。

• document.querySelectorAll()：返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

• property：修改对象属性，不会体现到 html 结构中

• attribute：修改 html 属性，会改变 html 结构

• 两者都有可能引起 DOM 的重新渲染

DOM 结构操作

• 新增节点：createElement

• 插入节点：appendChild

• 移动节点：已有的节点插入到别的容器就会发生移动

•  parentNode：父节点

•  childNodes：子节点

•  removeChild：删除子节点

如何优化 DOM 操作的性能

• DOM 查询做缓存

• 将频繁操作改为一次性操作

BOM 操作相关面试题

• navigation.userAgent：浏览器用于 HTTP 请求的用户代理头的值

• screen.width：屏幕宽度

• screen.height：屏幕高度

课程学习截图：