JS DAY4 日期对象与节点

一·日期对象

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

1.实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

时间必须实例化

获得当前时间

const date = new Date()

获得指定时间

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

2.时间对象方法

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

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

3.时间戳

使用场景:如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳:

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

算法:

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

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

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

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

三种方式获取时间戳:

1.使用 getTime()方法

必须实例化

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

2.简写 +new Date()       （推荐）

console.log(+new Date())

3.使用 Date.now()

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

console.log(Date.now())

二·节点操作

1.DOM节点

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

节点类型

>元素节点

所有的标签 比如 body、 div·html是根节点

>属性节点

所有的属性 比如 href

> 文本节点

所有的文本

>其他

2.查找节点

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

父节点查找

parentNode 属性
返回最近一级的父节点 找不到返回为null

子元素.parentNode

子节点查找

childNodes
     获得所有子节点、包括文本节点(空格、换行)、注释节点等

children 属性(重点)
       仅获得所有元索节点
       返回的还是一个伪数组

父元素.children

兄弟节点查找

1.下一个兄弟节点
nextElementSibling属性

2.上一个兄弟节点
previousElementSibling 属性

3.增加节点

1.创建节点

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

//创造一个新的元素节点
document.createElement('标签名')

2.追加节点

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

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

//插入到这个父元素的最后
父元素.appendchild(要插入的元素)

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

// 插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面）

 3.增加节点

特殊情况下，我们新增节点，按照如下操作
     复制一个原有的节点
     把复制的节点放入到指定的元素内部

克隆节点

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

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

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

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

4.删除节点

若一个节点在页面中已不需要时，可以制除它
在JavaScript 原生DOM操作中，要删除元素必须通过父元素制除

语法

父元素.removeChild(要删除的元素)

如不存在父子关系则删除不成功
制除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的，但是制除，则从html中制除节点

三·M端事件

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

       触屏事件 touch(也称触摸事件)，Android 和IOS 都有。

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

常见的触屏事件如下:

四·JS插件

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

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