Web APIs学习 --DOM（二）

日期对象

用来表示时间的对象，可以得到当前系统时间。

实例化

1 2	const date = new Date() // 获取当前时间 const date2 = new Date('2021-01-01') // 获取指定时间

时间对象方法

返回的数据不适用于直接使用，该怎么转换为实际开发中常用的格式呢？

const date = new Date()
console.log(date) // 2021-01-01T00:00:00.000Z
console.log(date.getFullYear()) // 2021 年份
console.log(date.getMonth()) // 0 月份 0-11 注意是从0开始！
console.log(date.getDate()) // 1 日期
console.log(date.getDay()) // 5 星期 0-6 0是星期天
console.log(date.getHours()) // 8 小时
console.log(date.getMinutes()) // 0 分钟
console.log(date.getSeconds()) // 0 秒

常见的拼接方式，写成函数的格式

1
2
3

function formatDate(date) {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}

如果想让月份和日期显示两位数，可以使用padStart方法，这个方法是ES6新增的方法，用于字符串补全长度。第一个参数是字符串的最小长度，第二个参数是用来补全的字符串。

function formatDate(date) {
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    const second = date.getSeconds().toString().padStart(2, '0')
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

怎么才能让时间实时更新呢？可以使用定时器，每隔一秒更新一次时间。

setInterval(() => {
    const date = new Date()
    console.log(formatDate(date))
}, 1000)

还有一些内置的格式化方法，比如toLocaleString方法，可以根据本地时间格式化日期。

const date = new Date()
console.log(date.toLocaleString()) // 2021/1/1 04:00:00
console.log(date.toLocaleDateString()) // 2021/1/1
console.log(date.toLocaleTimeString()) // 04:00:00

时间戳

时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总秒数，可以用来表示一个时间点。

使用场景比如说要计算倒计时效果，可以使用时间戳来计算。算法是：目标时间戳减去当前时间戳，得到的是毫秒数，再除以1000得到秒数。

const targetTime = new Date('2021-01-01').getTime()
setInterval(() => {
    const nowTime = new Date().getTime()
    const second = (targetTime - nowTime) / 1000
    console.log(second)
}, 1000)

还有更简洁的办法！下面是三个获取时间戳的方法，都是获取当前时间戳。

1
2
3

const time1 = new Date().getTime()
const time2 = +new Date() //推荐
const time3 = Date.now() // 只能获取当前时间戳

拿到相差的毫秒数后，可以转换为天、时、分、秒的格式。

const targetTime = new Date('2021-01-01').getTime()
setInterval(() => {
    const nowTime = new Date().getTime()
    const second = (targetTime - nowTime) / 1000
    const day = Math.floor(second / 3600 / 24)
    const hour = Math.floor(second / 3600 % 24)
    const minute = Math.floor(second / 60 % 60)
    const sec = Math.floor(second % 60)
    console.log(`${day}天${hour}时${minute}分${sec}秒`)
}, 1000)

节点操作

DOM节点

DOM节点是HTML文档中的元素，可以通过JS来操作DOM节点，比如增删改查。节点类型有：

元素节点：HTML标签
文本节点
属性节点
其他

查找节点

父节点

利用parentNode属性可以找到父节点，返回最近一级的父节点，找不到返回null。

1	const parent = son.parentNode

子节点

利用childNodes属性可以找到子节点，返回一个伪数组，包含所有子节点，包括文本节点和注释节点等。
children属性只包含元素节点，不包含文本节点，返回的依旧是伪数组。

兄弟节点

previousElementSibling属性可以找到前一个兄弟节点。
nextElementSibling属性可以找到后一个兄弟节点。

增加节点

很多情况需要在页面中新增节点，比如点击发布按钮后新增一条信息。

两个步骤：创建节点、追加节点。

createElement方法可以创建元素节点。
appendChild方法可以追加节点，插入到某个父元素的最后。

insertBefore方法可以插入到某个父元素的某个子元素前。

// 1. 创建节点
const div = document.createElement('div')
// 2. 追加节点
document.body.appendChild(div)
// 父元素.insertBefore(新元素, 参考元素)

克隆节点

cloneNode方法可以克隆节点，参数是一个布尔值，true表示深拷贝，克隆节点及其子节点，false表示浅拷贝，只克隆节点。

const div = document.createElement('div')
const div2 = div.cloneNode(true)
// 追加
document.body.appendChild(div2)

删除节点

removeChild方法可以删除节点，参数是要删除的节点。

// 父元素.removeChild(子元素)
const div = document.createElement('div')
document.body.appendChild(div)
document.body.removeChild(div)

M端事件，移动端又一些独特的地方，比如触屏事件touch，可以响应用户手指或触控笔对屏幕或触控版的操作。

常见的touch事件有：touchstart、touchmove、touchend。

JS插件

插件就是别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果，比如轮播图、日历等。

swiper是一个轮播图插件，可以实现轮播图效果。

1 2	<link ref="stylesheet" href = ./css/swiper.min.css> <script src="./js/swiper.min.js"></script>