JS-API-4-日期对象+节点操作

JS学习笔记9

日期对象

实例化

const date=new Date()
console.log(date) //系统默认时间
cons date1 = new Date('2022-5-1 08:30:00')
//指定时间

方法

// 1. 实例化
  const date = new Date();
  // 2. 调用时间对象方法
  // 通过方法分别获取年、月、日，时、分、秒
  const year = date.getFullYear(); // 四位年份
  const month = date.getMonth(); // 0 ~ 11

getFullYear 获取四位年份

getMonth 获取月份，取值为 0 ~ 11

getDate 获取月份中的每一天，不同月份取值也不相同

getDay 获取星期，取值为 0 ~ 6

getHours 获取小时，取值为 0 ~ 23

getMinutes 获取分钟，取值为 0 ~ 59

getSeconds 获取秒，取值为 0 ~ 59

时间戳

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

• 算法

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

• 三种方法获取时间戳

  let date=new Date()
  date.getTime()

  +new Date()
  
  //得到指定时间的时间戳，括号里面加时间
  +new Date('2022-4-1 18:30:00')

  Date.now()

  ​

节点操作

• DOM树里面每一个内容都称之为节点
• 类型：
  • 元素
  • 属性
  • 文字

查找节点（默认查元素节点）

一律用属性查找

• 父节点

const baby=document.querySelector('')
baby.parentNode
baby.parentNode.parentNode

• 子节点

const ul=document.querySelector('')
ul.children//得到为数组，选择亲儿子 

• 兄弟节点

const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling)  // 上一个兄弟
console.log(li2.nextElementSibling)  // 下一个兄弟

增加节点

1. 创建节点

document.createElement(‘div’)

document.body.appendChild(div)

2. 追加节点

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

ul.appendChild(li)

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

父元素.insertBefore(要插入的元素，在那个元素前面)

克隆节点

ul.appendChild(ul.children[0].cloneNode(true))

深克隆：true （li里面的全部内容）

浅克隆：false（默认，只克隆标签）

删除节点

父元素.removeChild(子元素)

M端事件（移动端）

1. touchstart 触摸开始
2. touchend 触摸结束
3. touchmove 触摸移动

SWIPER插件（plugin）

了解插件的使用方法