当前位置：首页 > news >正文

Web APIs 学习第五天：日期对象与DOM节点

news 2025/11/9 8:04:08

Web APIs 学习Day5

进一步学习 DOM 相关知识，实现可交互的网页特效

能够插入、删除和替换元素节点
能够依据元素节点关系查找节点

文章目录

Web APIs 学习Day5
- 日期对象
- - 实例化
  - 日期对象方法
  - 时间戳
- DOM 节点
- - DOM 节点
  - 查找节点
  - - 父节点查找
    - 子节点查找
    - 兄弟关系查找
  - 增加节点
  - - 创建节点
    - 追加节点
  - 删除节点
- M端事件

日期对象

目标：掌握 Date 日期对象的使用，动态获取当前计算机的时间，可以让网络显示日期。

日期对象：用来表示时间的对象

作用：可以得到当前系统的时间

实例化

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

ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。

语法：创建一个时间对象并获取时间：

获取当前时间：

const date = new Date() // 系统默认时间

获取指定时间：

const date = new Date('2025-11-06 08:30:00') // 指定时间
// date 变量即所谓的时间对象
console.log(typeof date) // object

日期对象方法

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

常用的方法及其取值范围如下：

日期对象

注：getMonth()和getDay()的范围是从 0 开始计算的，其中getDay()中的0是指星期天。

使用语法：date.方法名()，在此之前，必须先进行实例化。

 // 1. 实例化（获取日期对象）
const date = new Date()
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const year = date.getFullYear()  // 四位年份
const month = date.getMonth()  // 0 ~ 11 在开发中我们常 +1
const date = date.getDate()  // 天数 本月的第几号
const day = date.getDay()  // 星期几
const hours = date.getHours()  // 0 ~ 23
const minutes = date.getMinutes()  // 0 ~ 59
const sec = date.getSeconds()  // 0 ~ 59

如果想要获取一个格式化的日期，可以调用方法：date.toLocaleString()

const date = new Date()
document.write(date.toLocaleString())  // 2025/11/6 09:25:21
document.write(date.toLocaleDateString())  // 2025/11/6
document.write(date.toLocaleTimeString())  // 09:25:21

我们可以借此做一个简易的时钟：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 350px;height: 80px;border: 1px solid #000;text-align: center;line-height: 80px;font-size: 18px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')const date = new Date()div.innerHTML = date.toLocaleString()  // 初始化显示时间 否则页面会有1秒没有显示时间// 时钟setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString()}, 1000)</script>
</body></html>

时间戳

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。每一时间点的时间戳是唯一的，就像邮戳一样，不会改变，有点像编号。

使用场景：如果计算倒计时的效果，无法通过前面所学的方法来直接计算，需要借助时间戳。

算法：

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为‘年月日时分秒’的格式，就得到了倒计时时间

举个例子：将来的时间戳是2000ms，现在的时间戳是1000ms，那么剩余时间毫秒数是1000ms，转换格式后为 0时0分1秒。

获取时间戳的方法，分别为 getTime() 和 Date.now() 和 +new Date()

getTime()：必须先进行实例化

// 1. 必须先进行实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())  // 会出现类似 1762421271284 的数字 这就是时间戳

+new Date()：无需实例，或者说这个式子本身就包含实例化

console.log(+new Date())  // 当前的时间戳
console.log(+new Date('2022-4-1 18:30:00'))  // 特定时间的时间戳

Date.now() ：无需实例化，但只能得到当前的时间戳，而前两种可以返回特定时间的时间戳

console.log(Date.now())

以上几种方法还是建议使用+new Date()。

DOM 节点

掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。

DOM 节点

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

DOM节点

节点类型：

元素节点：
- 所有的标签都是 dom 节点，比如 body、div
- html 是根节点
属性节点：所有的属性，比如 a 标签里的属性 href
文本节点：所有的文本，比如 p 标签里的文本
其他

接下来的操作大部分都是针对元素节点。

查找节点

回顾之前的知识，我们获取元素通常是直接通过document.querySelector('CSS选择器')。但有时候，比如说获取 ul 标签里的具体某个小 li，我们只能通过事件委托来实现对它的操作，这其实有点麻烦。

现在，我们认识了 DOM 节点，我们知道，DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，因此，我们可以依据节点之间的关系查找节点。我们可以利用 ul 与 li 的父子关系，通过 DOM 节点来实现操作。

举个例子，关闭二维码。关闭一个二维码，我们需要点击按钮，二维码盒子erweima才得以关闭。但是实现的其实是二维码这个盒子的隐藏，因此我们还得获取这个盒子。

二维码

仔细观察，其实按钮和盒子erweima是父子关系，所以，我们可以这样做：点击关闭按钮，直接关闭它的爸爸，就无需再获取盒子了。

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

父节点
字节点
兄弟节点

父节点查找

父节点查找：

parentNode属性
返回最近一级的父节点（亲爸爸），找不到返回为 null

语法：子元素.parentNode

<body><div class="yeye"><div class="dad"><div class="baby">x</div></div></div><script>const baby = document.querySelector('.baby')console.log(baby)  // 返回dom对象 div.babyconsole.log(baby.parentNode)  // div.dadconsole.log(baby.parentNode.parentNode)  // div.yeye</script>
</body>

子节点查找

属性：

childNodes 获取全部的子节点，包括文本节点（空格、换行）、注释节点等
children 只获取所有的元素节点，返回的还是一个伪数组（重点）

语法：父元素.children

注：children 获取的不仅仅是亲孩子，是把孩子的所有内容（包括孩子里的标签）都获取了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>const ul = document.querySelector('ul')  // ulconsole.log(ul.children)  // 得到伪数组  选择的是 亲儿子 const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling)  // 上一个兄弟console.log(li2.nextElementSibling)  // 下一个兄弟</script>
</body></html>

兄弟关系查找

下一个兄弟节点：nextElementSibling属性

上一个兄弟节点：previousElementSibling属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>// 获取当前元素const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling)  // 上一个兄弟console.log(li2.nextElementSibling)  // 下一个兄弟</script>
</body></html>

增加节点

很多情况下，我们需要在页面中增加元素，比如，点击发布按钮，可以新增一条信息。

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点
把创建的节点放入到指定的元素内部（追加节点）

创建节点

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

语法：document.createElement('标签名')

// 1. 创建节点
const div = document.createElement('div')
console.log(div)

创建完的节点虽然存在，但页面中并没有它的位置，因此我们需要在页面中插入这个新创建的节点才能看到它。

追加节点

想要在页面中看到创造后的节点，还得插入到某个父元素中。

语法：父元素.appendChild(要插入的节点)

举个例子，我们创造一个 li 节点，并将它放入到 ul 中：

<body><ul></ul><script>// 获取父元素const ul = document.querySelector('ul')// 创建节点const li = document.createElement('li')// 可以给 li 一个内容li.innerHTML = '我是li'// 插入节点ul.appendChild(li)</script>
</body>

需要注意的是，通过这个语法是作为父元素的最后一个子元素来插入的。

如果我们想要插入到父元素某个子元素的前面，我们可以通过另一个语法：

父元素.insertBefore(要插入的元素, 在哪个元素前面)

<body><ul>我是老大</ul><script>const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'// 如果想要成为父元素的第一个子元素，就要放在当前第一个子元素之前ul.insertBefore(li, ul.children[0])</script>
</body>

特殊情况下，我们新增的节点，和之前的节点是完全一致的，这就叫克隆节点。克隆节点需要按照以下步骤：

复制一个原有的节点
把复制的节点放入到指定的元素内部

语法：元素.cloneNode(布尔值)

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

若为true，则代表克隆时会包含后代节点一起克隆，即深克隆
若为false，则代表克隆时不包含子代的后代节点，只复制子节点，即浅克隆
默认为false

<body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 获取父元素const ul = document.querySelector('ul')// 克隆节点  元素.cloneNode(true) 深克隆const li1 = ul.children[0].cloneNode(true)console.log(li1)  // 可以看到把第一个li的节点包括文本也克隆过来了// 追加节点ul.appendChild(li1)// 浅克隆ul.appendChild(ul.children[0].cloneNode())// 在页面中 只克隆了标签li 没有克隆文本</script>
</body>

删除节点

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

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除。

语法：父元素.removeChild(要删除的元素)

注：

如不存在父子关系（亲父子）则删除失败
删除节点和隐藏节点（display: none）是有区别的。隐藏节点该节点还是存在的，但是删除，则从 html 中删除节点

<body><div class="box">123</div><ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')// 删除节点  父元素.removeChlid(子元素)ul.removeChild(ul.children[0]) // 删除第一个亲儿子</script>
</body>

M端事件

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

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

常见的触屏事件如下：

触屏事件 touch	说明
touchstart	手指触摸到一个 DOM 元素时触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指在一个 DOM 元素上移开时触发

移动端模式可以打开 F12，找到图标：

m端事件

我们来体会一下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 1. 触摸div.addEventListener('touchstart', function () {console.log('开始触屏了')})// 2. 离开div.addEventListener('touchend', function () {console.log('手指离开了')})// 3. 移动div.addEventListener('touchmove', function () {console.log('手指一直移动')})</script>
</body></html>