日期对象
掌握 Date 日期对象的使用，动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
实例化
需要使用new关键字时，称为实例化
创建一个时间对象并获取时间
1
2
| const date = new Date();
const date = new Date('2024-02-02')
|
日期对象方法
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
1
2
3
4
5
6
|
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
|
| 方法 |
作用 |
说明 |
| getFullYear( ) |
获取年份 |
获取四位年份 |
| getMonth( ) |
获取月份 |
取值为 0 ~ 11 |
| getDate( ) |
获取月份中的每一天 |
不同月份取值也不相同 |
| getDay( ) |
获取星期 |
取值为 0 ~ 6 |
| getHours( ) |
获取小时 |
取值为 0 ~ 23 |
| getMinutes( ) |
获取分钟 |
取值为 0 ~ 59 |
| getSeconds( ) |
获取秒 |
取值为 0 ~ 59 |
时间戳
如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。
算法：
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
- 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms转换就是0小时0分钟1秒
获取时间戳的三种方法：
1
2
3
4
5
6
7
|
const date = new Date()
console.log(date.getTime())
console.log(+new Date())
console.log(Date.now())
|
获取时间戳的方法，分别为 getTime( ) 、 Date.now( ) 和 +new Date( )
节点操作
DOM节点
DOM数里每一个内容都称之为节点
节点类型：
- 元素节点
- 所以的标签，比如body、div
- html是根节点
- 属性节点
- 文本节点
- 其他
查找节点
DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
父子关系
父节点查找：
parentNode 属性- 返回最近一级的父节点，找不到则返回
null
子元素.parentNode
子节点查找：
- childNodes
- 获得所以子节点、包括文本节点（空格、换行）、注释节点等
- children属性（重点）
- 仅获得所以元素节点
- 返回的是一个伪数组
父元素.children
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<button class="btn1">所有的子节点</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
const ul = document.querySelector('ul')
console.log(ul.childNodes)
console.log(ul.children)
})
</script>
</body>
|
结论：
childNodes 获取全部的子节点，回车换行会被认为是空白文本节点children 只获取元素类型节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <body>
<table>
<tr>
<td width="60">序号</td>
<td>课程名</td>
<td>难度</td>
<td width="80">操作</td>
</tr>
<tr>
<td>1</td>
<td><span>HTML</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>2</td>
<td><span>CSS</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>3</td>
<td><span>Web APIs</span></td>
<td>中级</td>
<td><button>变色</button></td>
</tr>
</table>
<script>
const buttons = document.querySelectorAll('table button')
for(let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
this.parentNode.parentNode.style.color = 'red'
})
}
</script>
</body>
|
结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。
兄弟关系
兄弟关系查找：
- 下一个兄弟节点
- 上一个兄弟节点
previousElementSibling 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
const lis = document.querySelectorAll('ul li')
for(let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
console.log(this.previousSibling)
console.log(this.nextSibling)
})
}
</script>
</body>
|
结论：
previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。
增加节点
在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：
- 首先要创建一个新的 DOM 节点
- 把创建的新节点放入到指定的元素内部
创建节点
创建一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
1
| document.createElement('标签名')
|
追加节点
插入到父元素的最后一个子元素：
插入到父元素的某个子元素前面
1
| 父元素.insertBefore(要插入的元素, 在哪个元素前面)
|
克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为
true，则表示克隆时会包括后代节点一起克隆
- 若为
false，则表示克隆时不会包含后代节点（默认）
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<div class="box"></div>
<button class="btn">插入节点</button>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
const p = document.createElement('p')
p.innerText = '创建的新的p标签'
p.className = 'info'
const p2 = document.querySelector('p').cloneNode(true)
p2.style.color = 'red'
document.querySelector('.box').appendChild(p)
document.querySelector('.box').appendChild(p2)
})
</script>
</body>
|
结论：
createElement 动态创建任意 DOM 节点cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点appendChild 在末尾（结束标签前）插入节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<button class="btn1">在任意节点前插入</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
const relative = document.querySelector('li:nth-child(2)')
const li1 = document.createElement('li')
li1.style.color = 'red'
li1.innerText = 'Web APIs'
const li2 = document.querySelector('li:first-child').cloneNode(true)
li2.style.color = 'blue'
document.querySelector('ul').insertBefore(li1, relative)
document.querySelector('ul').insertBefore(li2, relative)
})
</script>
</body>
|
结论：
createElement 动态创建任意 DOM 节点cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点insertBefore 在父节点中任意子节点之前插入新节点
删除节点
删除现有的 DOM 节点，也需要关注两个因素：
- 首先由父节点删除子节点
- 其次是要删除哪个子节点。
父元素.removeChild(要删除的元素)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<button>删除节点</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Web APIs</li>
</ul>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
let ul = document.querySelector('ul')
let lis = document.querySelectorAll('li')
ul.removeChild(lis[0])
})
</script>
</body>
|
结论：removeChild 删除节点时一定是由父子关系。
移动端事件
触屏事件 touch（也称为触摸事件），Android 和 iOS 都有，关于移动端适配的内容
touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触控笔。
触屏事件可响应用户手指（或触屏笔）对屏幕或触控板操作
| 触屏touch事件 |
说明 |
| touchstart |
手指触摸到一个DOM元素时触发 |
| touchmove |
手指在一个DOM元素上滑动时触发 |
| touchend |
手指从一个DOM元素上移开时触发 |
触摸滑动插件
针对移动端适配的触摸滑动插件
