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

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

news 来源：原创 2024/9/20 4:14:35

文章目录

  • 一、日期对象
    • 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': 显示两位数的年份，例如 23year: 'numeric',// month: 月份的显示方式// 'numeric': 显示数字，例如 5// '2-digit': 显示两位数的数字，例如 05// 'long': 显示完整月份名称，例如 五月// 'short': 显示缩写的月份名称，例如 五月// 'narrow': 显示最短的月份名称，例如 5月month: '2-digit',// day: 日的显示方式// 'numeric': 显示数字，例如 20// '2-digit': 显示两位数的数字，例如 20day: '2-digit',// hour: 小时的显示方式// 'numeric': 显示数字，例如 14// '2-digit': 显示两位数的数字，例如 14hour: '2-digit',// minute: 分钟的显示方式// 'numeric': 显示数字，例如 30// '2-digit': 显示两位数的数字，例如 30minute: '2-digit',// second: 秒的显示方式// 'numeric': 显示数字，例如 45// '2-digit': 显示两位数的数字，例如 45second: '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

  1. 将复杂数据类型（如对象）转换为JSON字符串：使用JSON.stringify()方法将对象转换为字符串库存储在本地。
  2. 将JSON字符串存储到localStorage中：使用localStorage.setItem()方法将JSON字符串存储在localStorage中，以指定的键名作为标识。
  3. 从localStorage获取数据：使用localStorage.getItem()方法获取存储在localStorage中的JSON字符串。
  4. 解析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"

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • moonlight串流配置太复杂？推荐一款无需配置的宝藏串流软件GameViewer远程
  • DevOps学习笔记
  • CSS学习8[重点]--盒子模型边框、内外边距设定和外边距合并
  • 九九乘法口决表
  • idea中git提交或push到远程后回退到之前的某次提交简单有效的解决方案
  • HarmonyOS开发实战（ Beta5.0）DevEco Device Tool开发环境搭建实践
  • AI人的年度盛典：星河产业应用创新奖启动申报
  • 安全入门day.04
  • 数学建模--皮尔逊相关系数、斯皮尔曼相关系数
  • 给自己复盘用的随想录笔记-栈与队列
  • 【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文
  • 华为OD机试真题-猜数字-2024年OD统一考试（E卷）
  • 基于 AC 驱动的电容结构 GaN LED 模型开发和应用
  • k8s helm
  • 2024软考-软件设计师-经典易错题
  • Apache Spark Streaming 使用实例
  • classpath对获取配置文件的影响
  • JAVA并发编程--1.基础概念
  • JS 面试题总结
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • Mysql优化
  • php ci框架整合银盛支付
  • Python3爬取英雄联盟英雄皮肤大图
  • Redis中的lru算法实现
  • SQLServer插入数据
  • 力扣(LeetCode)56
  • 前端学习笔记之观察者模式
  • 移动互联网+智能运营体系搭建=你家有金矿啊！
  • C# - 为值类型重定义相等性
  • postgresql行列转换函数
  • ​油烟净化器电源安全，保障健康餐饮生活
  • #pragma data_seg 共享数据区（转）
  • #控制台大学课堂点名问题_课堂随机点名
  • （1）(1.9) MSP (version 4.2)
  • （1）Jupyter Notebook 下载及安装
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第6节 （嵌套的Finally代码块）
  • (第30天)二叉树阶段总结
  • （顶刊）一个基于分类代理模型的超多目标优化算法
  • （附源码）ssm高校运动会管理系统 毕业设计 020419
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • （面试必看！）锁策略
  • (循环依赖问题)学习spring的第九天
  • (转载)hibernate缓存
  • .DFS.
  • .NET Core 2.1路线图
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .NET/C# 使用 ConditionalWeakTable 附加字段（CLR 版本的附加属性，也可用用来当作弱引用字典 WeakDictionary）
  • .NET的数据绑定
  • .net与java建立WebService再互相调用
  • ？？Nginx实现会话保持_Nginx会话保持与Redis的结合_Nginx实现四层负载均衡
  • @FeignClient 调用另一个服务的test环境，实际上却调用了另一个环境testone的接口，这其中牵扯到k8s容器外容器内的问题，注册到eureka上的是容器外的旧版本...
  • [ACTF2020 新生赛]Upload 1
  • [BUG] Authentication Error
  • [C++数据结构](22)哈希表与unordered_set，unordered_map实现
  • [codeforces]Recover the String