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

Mr.Jessy2025-11-09 22:41

Web APIs 学习Day5

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

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

文章目录

日期对象

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

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

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

实例化

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

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

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

  • 获取当前时间：

    JavaScript 复制代码 
    const date = new Date() // 系统默认时间

  • 获取指定时间：

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

日期对象方法

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

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

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

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

javascript 复制代码 
 // 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()

JavaScript 复制代码 
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

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

html 复制代码 
<!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()：必须先进行实例化
JavaScript 复制代码 
// 1. 必须先进行实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())  // 会出现类似 1762421271284 的数字 这就是时间戳
  • +new Date()：无需实例，或者说这个式子本身就包含实例化
JavaScript 复制代码 
console.log(+new Date())  // 当前的时间戳
console.log(+new Date('2022-4-1 18:30:00'))  // 特定时间的时间戳
  • Date.now() ：无需实例化，但只能得到当前的时间戳，而前两种可以返回特定时间的时间戳
JavaScript 复制代码 
console.log(Date.now())

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

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

html 复制代码 
<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.baby
    console.log(baby.parentNode)  // div.dad
    console.log(baby.parentNode.parentNode)  // div.yeye
  </script>
</body>
子节点查找

属性：

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

语法：父元素.children

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

html 复制代码 
<!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')  // ul
    console.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属性

html 复制代码 
<!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('标签名')

JavaScript 复制代码 
// 1. 创建节点
const div = document.createElement('div')
console.log(div)

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

追加节点

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

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

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

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

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

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

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

html 复制代码 
<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
html 复制代码 
<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 中删除节点
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，找到图标：

我们来体会一下：

html 复制代码 
<!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>
相关推荐
前端大卫2 小时前
如何统一前端项目的 Node 版本和包管理器？
前端
杨福瑞2 小时前
数据结构：单链表(2)
c语言·开发语言·数据结构
进化中的码农2 小时前
Go中的泛型编程和reflect(反射)
开发语言·笔记·golang
存在morning2 小时前
【人工智能学习笔记 三】 AI教学之前端跨栈一：React整体分层架构
笔记·学习·架构
巫婆理发2222 小时前
评估指标+数据不匹配+贝叶斯最优误差（分析方差和偏差）+迁移学习+多任务学习+端到端深度学习
深度学习·学习·迁移学习
Hi~晴天大圣2 小时前
HTML onclick用法
前端·html
速易达网络2 小时前
HTML＜output＞标签
javascript·css·css3
音符犹如代码2 小时前
Java并发List实战：CopyOnWriteArrayList原理与ArrayList常见面试题
java·开发语言·面试·list
又是忙碌的一天3 小时前
抽象类和接口
java·开发语言
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07jdk21下载、安装（Windows、Linux、macOS）08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09PyCharm 社区版全平台安装指南10npm使用国内淘宝镜像的方法