JavaScript - Api学习 Day03 （日期对象、节点操作、两种定时器、本地存储）

文章目录

一、日期对象
- 1.1 实例化
- 1.2 日期对象方法
二、节点操作
- 2.1 父子兄弟节点
- - 1. 父节点查找
  - 2. 子节点查找
  - 3. 兄弟关系查找
- 2.2 增删节点
- - 1. 创建节点 - `createElement`
  - 2. 添加节点
  - - 2.1 `appendChild()` 方法
    - 2.2 `insertBefore()` 方法
    - 2.3. 克隆节点 - `cloneNode`
  - 3. 删除节点
  - - 3.1 `removeChild()` 方法
    - 3.2 `remove()` 方法
  - 4. 替换节点
  - - `replaceChild()` 方法
三、其他
- 3.1 定时器的对比
- - 延时函数（setTimeout）
  - 间歇函数（setInterval）
- 3.2 Js执行机制
四、本地存储
- 4.1 localStorage
- 4.2 存储分类sessionStorage
- 4.3 区别：
- 4.4 存储复杂数据类型到localStorage
- - 字符串拼接

一、日期对象

1.1 实例化

// 创建一个全局的日期格式化器
const globalFormatter = new Intl.DateTimeFormat('zh-CN', {
    // locale: 指定语言环境，这里是中文（中国）
    // 用于确定日期和时间的显示格式以及使用的日历系统。

    // options: 配置选项对象，用于指定日期和时间的格式化细节

        // timeZone: 指定时区，这里是东八区（上海）
        // 用于确定日期和时间的时区。
        timeZone: 'Asia/Shanghai',

        // year: 年份的显示方式
        // 'numeric': 显示完整的年份数字，例如 2023
        // '2-digit': 显示两位数的年份，例如 23
        year: 'numeric',

        // month: 月份的显示方式
        // 'numeric': 显示数字，例如 5
        // '2-digit': 显示两位数的数字，例如 05
        // 'long': 显示完整月份名称，例如 五月
        // 'short': 显示缩写的月份名称，例如 五月
        // 'narrow': 显示最短的月份名称，例如 5月
        month: '2-digit',

        // day: 日的显示方式
        // 'numeric': 显示数字，例如 20
        // '2-digit': 显示两位数的数字，例如 20
        day: '2-digit',

        // hour: 小时的显示方式
        // 'numeric': 显示数字，例如 14
        // '2-digit': 显示两位数的数字，例如 14
        hour: '2-digit',

        // minute: 分钟的显示方式
        // 'numeric': 显示数字，例如 30
        // '2-digit': 显示两位数的数字，例如 30
        minute: '2-digit',

        // second: 秒的显示方式
        // 'numeric': 显示数字，例如 45
        // '2-digit': 显示两位数的数字，例如 45
        second: '2-digit'
    
});

// 使用全局日期格式化器
function formatDateTime(date) {
    // 使用 globalFormatter 格式化传入的 date 参数
    // 返回格式化后的日期和时间字符串
    return globalFormatter.format(date);
}

在这里插入图片描述

1.2 日期对象方法

在这里插入图片描述
时间戳是一个特定的时间，通常以数字表示，用于标记事件发生的确切时间。在计算机科学中，时间戳通常是一个数字，表示从某个特定时间点（如1970年1月1日）到当前时间的毫秒数或秒数。时间戳在记录事件顺序、计算时间间隔和跟踪时间相关数据时非常有用。

在这里插入图片描述

二、节点操作

2.1 父子兄弟节点

node.parentNode: 获取当前节点的父节点。
node.childNodes: 获取当前节点的所有子节点。
node.firstChild: 获取当前节点的第一个子节点。
node.lastChild: 获取当前节点的最后一个子节点。
node.previousSibling: 获取当前节点的前一个兄弟节点。
node.nextSibling: 获取当前节点的下一个兄弟节点。

你描述了如何在DOM中通过父节点、子节点以及兄弟节点来查找和操作节点。下面我将详细解释这些属性和它们的用法。

1. 父节点查找

parentNode 属性
- 用于获取当前节点的父节点。
- 如果当前节点没有父节点（比如根节点），则返回null。
```
const child = document.getElementById('child');
const parent = child.parentNode; // 获取父节点
```

2. 子节点查找

childNodes 属性
- 返回一个包含所有子节点的NodeList，包括元素节点、文本节点（如空格、换行）和注释节点。
- NodeList是一个类数组对象，可以通过索引访问，但它不是一个真正的数组。
```
const parent = document.getElementById('parent');
const allChildren = parent.childNodes; // 获取所有子节点，包括文本和注释节点
```
children 属性（重点）
- 返回一个包含所有子元素节点的HTMLCollection，不包括文本节点、注释节点等。
- HTMLCollection是一个类数组对象，可以通过索引访问。
```
const parent = document.getElementById('parent');
const elementChildren = parent.children; // 获取所有元素节点
```

3. 兄弟关系查找

下一个兄弟节点
- nextElementSibling 属性
  - 用于获取当前节点的下一个兄弟元素节点（即下一个同级元素节点），如果没有则返回null。
```
const current = document.getElementById('current');
const nextSibling = current.nextElementSibling; // 获取下一个兄弟元素节点
```
上一个兄弟节点
- previousElementSibling 属性
  - 用于获取当前节点的上一个兄弟元素节点（即上一个同级元素节点），如果没有则返回null。
```
const current = document.getElementById('current');
const previousSibling = current.previousElementSibling; // 获取上一个兄弟元素节点
```

2.2 增删节点

当然，下面是按照从创建开始到增删的顺序，重新整理的内容：

1. 创建节点 - `createElement`

功能: createElement 用于创建指定标签名称的 HTML 元素节点。

const newElement = document.createElement(tagName);

参数:
- tagName: 字符串，表示要创建的元素的标签名称（例如 div, span, p 等）。

2. 添加节点

2.1 `appendChild()` 方法

功能: 将一个节点添加为指定父节点的最后一个子节点。
```
parentNode.appendChild(newNode);
```

2.2 `insertBefore()` 方法

功能: 在指定的参考节点之前插入一个新的节点。

parentNode.insertBefore(newNode, referenceNode);

2.3. 克隆节点 - `cloneNode`

功能: cloneNode 用于克隆一个节点，可以选择是否深度克隆（包括其子节点）。

const clonedNode = originalNode.cloneNode(deep);

参数:
- deep: 布尔值，表示是否进行深度克隆。如果为 true，则克隆节点及其所有子节点；如果为 false，则只克隆节点本身，不包括子节点。默认false

3. 删除节点

3.1 `removeChild()` 方法

功能: 从父节点中移除一个子节点，并返回被移除的节点。
```
parentNode.removeChild(childNode);
```

3.2 `remove()` 方法

功能: 直接删除节点本身。
```
element.remove();
```

4. 替换节点

`replaceChild()` 方法

功能: 用一个新的节点替换一个子节点，并返回被替换的节点。

parentNode.replaceChild(newNode, oldNode);

三、其他

3.1 定时器的对比

延时函数（setTimeout）用于在指定的时间后执行一次函数，而间歇函数（setInterval）用于每隔一定时间重复执行函数。

延时函数（setTimeout）

函数语法：setTimeout(function, delay)
介绍：setTimeout 函数会在指定的延迟时间后执行一次指定的函数。
例子：

setTimeout(function() {
    console.log('延时函数执行了！');
}, 2000);

请添加图片描述

间歇函数（setInterval）

函数语法：setInterval(function, delay)
介绍：setInterval 函数会每隔指定的时间重复执行指定的函数。
例子：

setInterval(function() {
    console.log('间歇函数执行了！');
}, 1000);

请添加图片描述

3.2 Js执行机制

JavaScript的执行机制是单线程的，采用的是事件循环模型。

代码执行时，会被分为同步任务和异步任务，同步任务会按顺序执行，而异步任务会被放入任务队列中，在主线程空闲时才会被执行。事件循环会不断地从任务队列中取出任务执行，这样就实现了异步操作。

同步任务是按照代码顺序依次执行，执行完一个才能执行下一个，会阻塞后续代码的执行；

// 同步任务示例
console.log("Start");
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.log("End");

异步任务不会等待，会先继续执行后续代码，当异步任务完成后会通过回调函数或者Promise来通知执行结果。这样可以提高程序的性能和响应速度。

// 异步任务示例
console.log("Start");
setTimeout(() => {
    console.log("Async task completed");
}, 2000);
console.log("End");

执行栈（call stack）是用来存储代码执行过程中的上下文和调用关系的数据结构，遵循先进后出的原则。任务队列（task queue）则用来存储异步任务的回调函数。事件循环会不断地将任务队列中的任务取出，放入执行栈中执行，这样实现了异步任务的执行。

四、本地存储

4.1 localStorage

// 存储数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据
const data = localStorage.getItem('key');

// 删除localStorage中的数据
localStorage.removeItem('key');

// 清空localStorage
localStorage.clear();

4.2 存储分类sessionStorage

// 存储数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据
const data = sessionStorage.getItem('key');

// 删除sessionStorage中的数据
sessionStorage.removeItem('key');

// 清空sessionStorage
sessionStorage.clear();

在这里插入图片描述

4.3 区别：

作用域：localStorage的数据在浏览器关闭后仍然存在，而sessionStorage的数据在当前会话结束（关闭标签页或浏览器）时会被清除。
存储大小：localStorage的存储容量较大，一般为5MB，而sessionStorage的容量较小，一般为5MB。
共享性：localStorage的数据在同一域名下的不同窗口、标签页之间共享，而sessionStorage的数据只在同一标签页下共享。
生命周期：localStorage的数据不会过期，除非手动删除，而sessionStorage的数据在会话结束时自动删除。
用途：localStorage适合长期存储，sessionStorage适合临时存储会话数据。

4.4 存储复杂数据类型到localStorage

将复杂数据类型（如对象）转换为JSON字符串：使用JSON.stringify()方法将对象转换为字符串库存储在本地。
将JSON字符串存储到localStorage中：使用localStorage.setItem()方法将JSON字符串存储在localStorage中，以指定的键名作为标识。
从localStorage获取数据：使用localStorage.getItem()方法获取存储在localStorage中的JSON字符串。
解析JSON字符串为复杂数据类型：使用JSON.parse()方法将获取的JSON字符串解析为原始的复杂数据类型，如对象或数组。

// 存储复杂数据类型到localStorage（需要先将对象转换为JSON字符串）
const complexObject = { name: 'Alice', age: 30 };
localStorage.setItem('complexData', JSON.stringify(complexObject));

// 从localStorage获取并解析复杂数据类型
const storedData = localStorage.getItem('complexData');
const parsedData = JSON.parse(storedData);
console.log(parsedData);

字符串拼接

通过map方法，我们将数组中的每个数字转换为字符串形式，得到一个新的字符串数组stringArray。然后，我们使用join方法将这个字符串数组中的元素用指定的分隔符（这里是-）连接起来，得到最终的拼接字符串result。


// 使用map和join方法实现字符串拼接
const array = [1, 2, 3, 4, 5];

// 使用map方法将数组元素转换为字符串
const stringArray = array.map(num => num.toString());

// 使用join方法将字符串数组连接成一个字符串
const result = stringArray.join('-');

console.log(result); // 输出: "1-2-3-4-5"