Web APIs 第四天

目录

日期对象

实例化

 日期对象方法

时间戳

节点操作

DOM节点

查找节点

增加节点

删除节点

M端事件

JS插件（swiper）

重绘和回流

input的autocomplete="off"属性

---

日期对象

实例化

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

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

获得当前时间

获得指定时间

 日期对象方法

date.toLocaleString()

date.toLocaleDateString()

date.toLocaleTimeString()

时间戳

是指1970年01月01日00时00分00秒起至现在的 毫秒数 ，它是一种特殊的计量时间的方式

算法：

Ø 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

Ø 剩余时间毫秒数 转换为剩余时间的 年月日时分秒 就是 倒计时时间

Ø 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms

Ø 1000ms 转换为就是 0小时0分1秒

1. 使用 getTime() 方法

2. 简写 +new Date()

  const now = +new Date()// 现在的时间戳
      const last = +new Date('2030-6-6 24:00:00')// 将来的时间戳

3. 使用 Date.now()

Ø 无需实例化

Ø 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

节点操作

DOM节点

DOM树里每一个内容都称之为节点

节点类型

Ø 元素节点

        所有的标签 比如 body、 div

        html 是根节点

Ø 属性节点

        所有的属性 比如 href

Ø 文本节点

        所有的文本

Ø 其他

查找节点

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

Ø 父节点

Ø 子节点

Ø 兄弟节点

父节点查找：（找亲爸爸）

Ø parentNode 属性

Ø 返回最近一级的父节点 找不到返回为null

子节点查找：

childNodes

        获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性 （重点）（只找亲儿子，但是，亲儿子的内容可以得到）

        仅获得所有元素节点

        返回的还是一个伪数组

兄弟关系查找：

1. 下一个兄弟节点

Ø nextElementSibling 属性

2. 上一个兄弟节点

Ø previousElementSibling 属性

增加节点

创建节点

即创造出一个新的网页元素，再添加到网页内， 一般先创建节点，然后插入节点

创建元素节点方法：

追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

插入到父元素中某个子元素的前面

insertBefore(插入的元素, 放到哪个元素的前面)

克隆节点

 

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

Ø 若为true，则代表克隆时会包含后代节点一起克隆

Ø 若为false，则代表克隆时不包含后代节点

Ø 默认为false

若为true，深克隆 （复制标签和内容）

若为false，浅克隆 （复制标签）

删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过 父元素删除

语法

注：

Ø 如不存在父子关系则删除不成功

Ø 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件

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

1 触屏事件 touch （也称触摸事件），Android 和 IOS 都有。

2 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作。

3 常见的触屏事件如下：

JS插件（swiper）

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的基本过程

Ø 熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分

重绘和回流

1. 浏览器是如何进行界面渲染的

1 解析（Parser）HTML，生成DOM树(DOM Tree)

2 同时解析（Parser） CSS，生成样式规则 (Style Rules)

3 根据DOM树和样式规则，生成渲染树(Render Tree)

4 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

5 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

6 Display: 展示在页面上

回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

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

Ø 页面的首次刷新

Ø 浏览器的窗口大小发生改变

Ø 元素的大小或位置发生改变

Ø 改变字体的大小

Ø 内容的变化（如：input框的输入，图片的大小）

Ø 激活css伪类 （如：:hover）

Ø 脚本操作DOM（添加或者删除可见的DOM元素）

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

input的autocomplete="off"属性

输入表单信息的历史记录关闭

这样，下一次输入的历史记录就不会有提示

减少暴露用户的隐藏数据