# day04 - Web APIs

学习目标：

理解节点 (标签) 的增删改查

具备编写增加学生信息表案例的能力

# 1. 日期对象

目标：掌握日期对象，可以让网页显示日期

• 日期对象：用来表示时间的对象
• 作用：可以得到当前系统时间

# 1.1 实例化

目标：能够实例化日期对象

• 在代码中发现了 new 关键字时，一般将这个操作称为实例化

• 创建一个时间对象并获取时间

  • 获得当前时间

    1	const date = new Date()

  • 获得指定时间

    1 2	const date = new Date('2008-8-8') console.log(date)

# 1.2 日期对象方法

目标：能够使用日期对象中的方法写出常见日期

使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

# 1.2.2 案例 页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08

分析：

• 调用日期对象方法进行转换
• 记得数字要补 0
• 字符串拼接后，通过 innerText 给 标签

# 1.3 时间戳

目标：能够获得当前时间戳

• 使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
• 什么是时间戳:
  • 是指 1970 年 01 月 01 日 00 时 00 分 00 秒起至现在的毫秒数，它是一种特殊的计量时间的方式
• 算法：
  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
  • 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
  • 1000ms 转换为就是 0 小时 0 分 1 秒

三种方式获取时间戳

1. 使用 getTime () 方法

   1 2	const date = new Date() console.log(date.getTime())

2. 简写 +new Date ()

   1	console.log(+new Date())

   <span style="color: red"> 重点记住 </span>

3. 使用 Date.now ()

   • 无需实例化
   • 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

   1	console.log(Date.now())

# 1.3.2 总结

• 实例化日期对象怎么写？
• 日期对象方法里面月份和星期有什么注意的？
• 获取时间戳有哪三种方式？重点记住那个？
  • date.getTime()
  • <span style="color: red">+new Date() </span>
  • Date.now()
  • <span style="color: red"> 重点记住 +new Date () 因为可以返回当前时间戳或者指定的时间戳 </span>

# 1.3.3 案例 放学倒计时

需求：计算到下课还有多少时间

分析：

• 用将来时间减去现在时间就是剩余的时间
• 核心： 使用将来的时间戳减去现在的时间戳
• 把剩余的时间转换为 天 时 分 秒

注意：

• 通过时间戳得到是毫秒，需要转换为秒在计算
• 转换公式:
  • d = parseInt (总秒数 / 60/60 /24); // 计算天数
  • h = parseInt (总秒数 / 60/60 %24) // 计算小时
  • m = parseInt (总秒数 /60 %60); // 计算分数
  • s = parseInt (总秒数 %60); // 计算当前秒数

# 2. 节点操作

目标：能说出 DOM 节点的类型

# 2.1 节点概述

• DOM 节点
  • DOM 树里每一个内容都称之为节点
• 节点类型
  • 元素节点
    • 所有的标签 比如 body、 div
    • html 是根节点
  • 属性节点
    • 所有的属性 比如 href
  • 文本节点
    • 所有的文本
  • 其他

# 2.1 总结

• 什么是 DOM 节点？
  • DOM 树里每一个内容都称之为节点
• DOM 节点的分类？
  • 元素节点 比如 div 标签
  • 属性节点 比如 class 属性
  • 文本节点 比如标签里面的文字
• 我们重点记住那个节点？
  • 元素节点

# 2.2 查找节点

目标：能够具备根据节点关系查找目标节点的能力

• 关闭二维码案例：

  • 点击关闭按钮， 关闭的是二维码的盒子， 还要获取 erweima 盒子

• 思考：

  • 关闭按钮 和 erweima 是什么关系呢？
  • 父子关系
  • 所以，我们完全可以这样做：点击关闭按钮， 直接关闭它的爸爸，就无需获取 erweima 元素了

• 节点关系：针对的找亲戚返回的都是对象

  • 父节点
  • 子节点
  • 兄弟节点

# 2.2.1 父子节点查找

• parentNode 属性
• 返回最近一级的父节点 找不到返回为 null
• 语法： 子元素.parentNode

# 案例：关闭广告

需求：点击关闭广告

# 2.2.2 子节点查找

• childNodes
  • 获得所有子节点、包括文本节点（空格、换行）、注释节点等
• <span style="color: red">children 属性 （重点）</span>
  • 仅获得所有元素节点
  • 返回的还是一个伪数组
  • 示例 父元素.children

# 2.2.3 兄弟关系查找

• 下一个兄弟节点
  • nextElementSibling 属性
• 上一个兄弟节点
  • previousElementSibling 属性

# 2.2.4 总结

• 查找父节点用那个属性？
• 查找所有子节点用那个属性？
• 查找兄弟节点用那个属性？

# 2.3 增加节点

目标：能够具备根据需求新增节点的能力

• 很多情况下，我们需要在页面中增加元素
  • 比如，点击发布按钮，可以新增一条信息
• 一般情况下，我们新增节点，按照如下操作：
  • 创建一个新的节点
  • 把创建的新的节点放入到指定的元素内部

# 2.3.1 创建节点

• 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
• 创建元素节点方法：
• 语法： document.createElement('标签名')

# 2.3.2 追加节点

• 要想在界面看到，还得插入到某个父元素中
• 插入到这个 <span style="color: red"> 父元素的最后 </span>
  • 父元素.appendChild(要插入的元素)
• 插入到 <span style="color: red"> 某个子元素的前面 </span>
  • 父元素.insertBefore(要插入的元素，在哪个元素前面)

# 案例：学成在线案例渲染

需求：按照数据渲染页面

分析：

• 准备好空的 ul 结构
• 根据数据的个数，创建一个新的空 li
• li 里面添加内容 img 标题等
• 追加给 ul

重点练习：创建节点和追加节点

# 2.3.3 克隆节点

• 特殊情况下，我们新增节点，按照如下操作:
  • 复制一个原有的节点
  • 把复制的节点放入到指定的元素内部
• 语法： 元素.cloneNode(布尔值)

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值

• 若为 true，则代表克隆时会包含后代节点一起克隆
• 若为 false，则代表克隆时不包含后代节点
• 默认为 false

# 2.4 删除节点

目标：能够具备根据需求删除节点的能力

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除
• 语法：
  • 父元素.removeChild(要删除的元素)
• 注意：
  • 如不存在父子关系则删除不成功
  • 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从 html 中删除节点

# 3. 移动端事件

目标：了解移动端常见的事件

移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

• <span style="color: red"> 触屏事件 touch</span>（也称触摸事件），Android 和 IOS 都有。

• 常见的触屏事件如下：

  触屏 touch 事件	说明
  touchstart	手指触摸到一个 DOM 元素时触发
  touchmove	手指在一个 DOM 元素上滑动时触发
  touchend	手指从一个 DOM 元素上移开时触发

# 4. JS 插件

# 4.1 插件的基本使用

• 插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果
• 学习插件的基本过程
  • 熟悉官网，了解这个插件可以完成什么需求 https://www.swiper.com.cn/
  • 看在线演示，找到符合自己需求的 demo https://www.swiper.com.cn/demo/index.html
  • 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
  • 查看 APi 文档，去配置自己的插件 https://www.swiper.com.cn/api/index.html
  • 注意：多个 swiper 同时使用的时候，类名需要注意区分

# 5. 综合案例

# 5.1 案例 游乐园轮播图

# 5.2 案例 学生信息表

业务模块：

• 点击录入按钮可以录入数据
• 点击删除可以删除当前的数据

核心思路：

​ ①：声明一个空的数组

​ ②：点击录入，根据相关数据，生成对象，追加到数组里面

​ ③：根据数组数据渲染页面 - 表格的 行

​ ④：点击删除按钮，删除的是对应数组里面的数据

​ ⑤：再次根据数组的数据，渲染页面

# 6. 重绘和回流（了解）

# 6.1 浏览器是如何进行界面渲染的

• 解析（Parser）HTML，生成 DOM 树 (DOM Tree)
• 同时解析（Parser） CSS，生成样式规则 (Style Rules)
• 根据 DOM 树和样式规则，生成渲染树 (Render Tree)
• 进行布局 Layout (回流 / 重排): 根据生成的渲染树，得到节点的几何信息（位置，大小）
• 进行绘制 Painting (重绘): 根据计算和获取的信息进行整个页面的绘制
• Display: 展示在页面上

# 6.2 回流和重绘

• 回流（重排）
  • 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。
• 重绘
  • 由于节点 (元素) 的样式的改变并不影响它在文档流中的位置和文档布局时 (比如：color、background-color、outline 等), 称为重绘。
• <span style="color: red"> 重绘不一定引起回流，而回流一定会引起重绘。</span>

# 6.3 会导致回流（重排）的操作

• 页面的首次刷新
• 浏览器的窗口大小发生改变
• 元素的大小或位置发生改变
• 改变字体的大小
• 内容的变化（如：input 框的输入，图片的大小）
• 激活 css 伪类 （如：:hover）
• 脚本操作 DOM（添加或者删除可见的 DOM 元素）

简单理解影响到布局了，就会有回流

# 6.4 思考

思考下述代码的重绘重排过程

1
2
3
4
5
6

let s = document.body.style
s.padding = '2px'  // 重排 + 重绘
s.border = '1px solid red' // 重排 + 重绘
s.color = 'blue' // 重绘
s.backgroundColor = '#ccc' // 重绘
s.fontSize = '14px' // 重排 + 重绘