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

JavaScript的Web APIs 入门到实战（day4）：DOM 进阶与日期对象（附巩固练习和案例讲解）

news 2025/11/7 7:43:20

一、DOM 节点操作进阶

DOM 节点操作是实现网页交互效果的核心，今天主要学习了节点的创建、插入、删除、克隆以及节点关系查找等操作。

1. 节点的概念

DOM 树中的每一个内容都称为节点，主要分为三类：

元素节点：所有的 HTML 标签（如 div、ul、li 等），html 是根节点
属性节点：元素的属性（如 href、class 等）
文本节点：标签中的文本内容（包括空格和换行）

2. 节点关系查找

（1）父节点查找

使用 parentNode 属性获取元素的直接父节点

const son = document.querySelector('.son');
console.log(son.parentNode); // 获取直接父节点
console.log(son.parentNode.parentNode); // 获取祖父节点

（2）子节点查找

childNodes：获取所有子节点（包括文本节点、注释节点等，了解即可）
children：仅获取所有元素类型子节点（重点，返回伪数组）

const ul = document.querySelector('ul');
console.log(ul.children); // 所有元素子节点
console.log(ul.children[0]); // 第一个子元素

（3）兄弟节点查找

nextElementSibling：获取下一个兄弟元素节点
previousElementSibling：获取上一个兄弟元素节点

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

3. 节点操作方法

（1）创建节点

使用 document.createElement('标签名') 方法创建新元素节点

const li = document.createElement('li');
li.innerHTML = '新创建的li';

（2）插入节点

appendChild(新节点)：将节点插入到父元素的最后位置
insertBefore(新节点, 参考节点)：将节点插入到参考节点之前

const ul = document.querySelector('ul');
// 插入到最后
ul.appendChild(li);
// 插入到第一个子元素前
ul.insertBefore(li, ul.children[0]);

（3）克隆节点

使用 cloneNode(布尔值) 方法克隆节点

参数为 true：克隆节点及所有后代节点
参数为 false：仅克隆当前节点（默认值）

const ul = document.querySelector('ul');
// 克隆第一个li及其内容
const liCopy = ul.children[0].cloneNode(true);
ul.appendChild(liCopy);

（4）删除节点

使用 removeChild(子节点) 方法通过父节点删除子节点

const ul = document.querySelector('ul');
// 删除第一个子元素
ul.removeChild(ul.children[0]);// 结合事件使用
const btn = document.querySelector('button');
btn.addEventListener('click', function() {ul.removeChild(ul.children[0]);
});

注意：删除节点与隐藏节点（display: none）的区别：删除节点会从 HTML 结构中彻底移除，而隐藏节点只是视觉上不可见，仍然存在于 DOM 中。

二、日期对象（Date）

Date 对象用于处理日期和时间，与 console、Math 不同，它需要使用 new 关键字实例化。

1. 实例化日期对象

// 获取当前系统时间
const now = new Date();
// 指定时间
const date = new Date('2020-05-01');
// 也可以通过年、月、日等参数指定
const date2 = new Date(2020, 4, 1); // 月份是0-11，所以4代表5月

2. 常用方法

方法	说明
getFullYear()	获取四位数年份
getMonth()	获取月份（0-11，需 + 1 使用）
getDate()	获取月份中的某一天
getDay()	获取星期（0-6，0 代表星期日）
getHours()	获取小时（0-23）
getMinutes()	获取分钟（0-59）
getSeconds()	获取秒（0-59）

const date = new Date();
console.log(date.getFullYear()); // 年份
console.log(date.getMonth() + 1); // 月份（+1是因为返回0-11）
console.log(date.getDate()); // 日
console.log(date.getDay()); // 星期

3. 格式化时间

使用 toLocale 相关方法可以快速获取格式化的时间字符串：

const date = new Date();
console.log(date.toLocaleString()); // 2023/2/26 20:39:21（日期+时间）
console.log(date.toLocaleDateString()); // 2023/2/26（仅日期）
console.log(date.toLocaleTimeString()); // 20:39:58（仅时间）

4. 时间戳

时间戳是指 1970 年 01 月 01 日 00 时 00 分 00 秒起至指定时间的毫秒数，获取方法有三种：

const date = new Date();
// 方法1
console.log(date.getTime());
// 方法2（常用）
console.log(+new Date());
// 方法3
console.log(Date.now());// 获取指定时间的时间戳
console.log(+new Date('2023-3-11 09:30:00'));

5. 实战：显示当前星期

const weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const today = new Date();
console.log(weeks[today.getDay()]); // 输出当前星期

三、移动端事件

移动端常用的触摸事件：

const div = document.querySelector('div');
// 触摸开始
div.addEventListener('touchstart', function() {console.log('开始触摸');
});
// 触摸结束
div.addEventListener('touchend', function() {console.log('触摸结束');
});
// 触摸移动
div.addEventListener('touchmove', function() {console.log('触摸移动中');
});

四、Swiper 插件使用简介

Swiper 是一款常用的轮播图插件，使用步骤：

下载 Swiper 插件包
引入对应的 CSS 和 JS 文件
参考官方文档或 demos 文件夹中的示例
根据 API 文档配置适合自己需求的轮播效果
注意：多个 Swiper 同时使用时，需区分类名避免冲突

五、巩固练习

练习题 1：动态时钟（Date 对象 + DOM 操作）

题目要求

创建一个网页，实时显示当前的 “年 - 月 - 日时：分: 秒星期 X” 格式时间
每秒自动更新时间，确保时间实时同步
给时间添加简单样式（如字体大小 24px、居中显示、颜色 #333）

参考答案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实时时钟</title><style>.clock {font-size: 24px;text-align: center;color: #333;margin-top: 50px;font-family: Arial, sans-serif;}</style>
</head>
<body><div class="clock"></div><script>// 1. 获取显示容器const clockBox = document.querySelector('.clock');// 2. 定义星期数组const weeks = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];// 3. 封装时间格式化函数function formatTime() {const date = new Date();// 获取各时间部分const year = date.getFullYear();const month = addZero(date.getMonth() + 1); // 月份0-11，需+1const day = addZero(date.getDate());const hour = addZero(date.getHours());const minute = addZero(date.getMinutes());const second = addZero(date.getSeconds());const week = weeks[date.getDay()];// 拼接格式return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;}// 4. 补零函数（确保个位数显示为两位数）function addZero(num) {return num < 10 ? '0' + num : num;}// 5. 初始化显示+每秒更新clockBox.innerHTML = formatTime();setInterval(() => {clockBox.innerHTML = formatTime();}, 1000);</script>
</body>
</html>

练习题 2：待办事项列表（DOM 节点全操作）

题目要求

实现 “添加待办” 功能：输入框输入内容，点击按钮后添加到列表中
实现 “删除待办” 功能：每个待办项后添加删除按钮，点击删除当前项
实现 “克隆待办” 功能：每个待办项后添加克隆按钮，点击克隆当前项到列表末尾
输入框为空时，点击添加按钮提示 “请输入待办内容”

参考答案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>待办事项列表</title><style>.todo-container {width: 500px;margin: 50px auto;}input {width: 350px;padding: 8px;font-size: 16px;}button {padding: 8px 16px;font-size: 16px;cursor: pointer;margin-left: 10px;}.todo-list {margin-top: 20px;list-style: none;padding: 0;}.todo-item {display: flex;align-items: center;padding: 10px;border-bottom: 1px solid #eee;justify-content: space-between;}.todo-item span {flex: 1;font-size: 16px;}.todo-item button {margin-left: 5px;padding: 4px 8px;font-size: 14px;}.delete-btn {background-color: #ff4444;color: white;border: none;}.clone-btn {background-color: #4CAF50;color: white;border: none;}</style>
</head>
<body><div class="todo-container"><input type="text" id="todoInput" placeholder="请输入待办事项"><button id="addBtn">添加待办</button><ul class="todo-list" id="todoList"></ul></div><script>// 1. 获取元素const input = document.getElementById('todoInput');const addBtn = document.getElementById('addBtn');const todoList = document.getElementById('todoList');// 2. 添加待办事件addBtn.addEventListener('click', function() {const content = input.value.trim();if (!content) {alert('请输入待办内容');return;}// 创建待办项节点createTodoItem(content);// 清空输入框input.value = '';});// 3. 封装创建待办项函数function createTodoItem(content) {// 创建li节点const li = document.createElement('li');li.className = 'todo-item';// 创建内容spanconst span = document.createElement('span');span.innerText = content;// 创建删除按钮const deleteBtn = document.createElement('button');deleteBtn.className = 'delete-btn';deleteBtn.innerText = '删除';// 删除事件（通过父节点删除）deleteBtn.addEventListener('click', function() {todoList.removeChild(li);});// 创建克隆按钮const cloneBtn = document.createElement('button');cloneBtn.className = 'clone-btn';cloneBtn.innerText = '克隆';// 克隆事件cloneBtn.addEventListener('click', function() {// 克隆当前li（包含所有子节点）const cloneLi = li.cloneNode(true);// 重新给克隆后的按钮绑定事件cloneLi.querySelector('.delete-btn').addEventListener('click', function() {todoList.removeChild(cloneLi);});cloneLi.querySelector('.clone-btn').addEventListener('click', function() {createTodoItem(cloneLi.querySelector('span').innerText);});// 添加到列表末尾todoList.appendChild(cloneLi);});// 组装节点li.appendChild(span);li.appendChild(deleteBtn);li.appendChild(cloneBtn);todoList.appendChild(li);}</script>
</body>
</html>