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

文章目录

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

一、日期对象

1.1 实例化

javascript 复制代码

// 创建一个全局的日期格式化器
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 父子兄弟节点

javascript 复制代码

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

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

1. 父节点查找

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

2. 子节点查找

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

3. 兄弟关系查找

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

2.2 增删节点

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

1. 创建节点 - `createElement`

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

javascript 复制代码

const newElement = document.createElement(tagName);

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

2. 添加节点

2.1 `appendChild()` 方法

功能: 将一个节点添加为指定父节点的最后一个子节点。

javascript 复制代码

parentNode.appendChild(newNode);

2.2 `insertBefore()` 方法

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

javascript 复制代码

parentNode.insertBefore(newNode, referenceNode);

2.3. 克隆节点 - `cloneNode`

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

javascript 复制代码

const clonedNode = originalNode.cloneNode(deep);

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

3. 删除节点

3.1 `removeChild()` 方法

功能: 从父节点中移除一个子节点，并返回被移除的节点。

javascript 复制代码

parentNode.removeChild(childNode);

3.2 `remove()` 方法

功能: 直接删除节点本身。

javascript 复制代码

element.remove();

4. 替换节点

`replaceChild()` 方法

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

javascript 复制代码

parentNode.replaceChild(newNode, oldNode);

三、其他

3.1 定时器的对比

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

延时函数（setTimeout）

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

javascript 复制代码

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

间歇函数（setInterval）

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

javascript 复制代码

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

3.2 Js执行机制

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

四、本地存储

4.1 localStorage

js 复制代码

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

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

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

// 清空localStorage
localStorage.clear();

4.2 存储分类sessionStorage

javascript 复制代码

// 存储数据到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字符串解析为原始的复杂数据类型，如对象或数组。

javascript 复制代码

// 存储复杂数据类型到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。

javascript 复制代码

// 使用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"

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. 创建节点 - `createElement`

2.1 `appendChild()` 方法

2.2 `insertBefore()` 方法

2.3. 克隆节点 - `cloneNode`

3.1 `removeChild()` 方法

3.2 `remove()` 方法

`replaceChild()` 方法

3.1 定时器的对比