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

【零基础】学JS之APIS第四天

news 2026/5/25 16:45:56

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习web APIS的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!

DOM节点操作

DOM树里每一个内容都称之为节点

节点类型

元素节点： 所有的标签：比如 body、 div （ html 是根节点）

属性节点：所有的属性比如 href

文本节点：所有的文本

查找节点

父节点查找：

parentNode 属性

返回最近一级的父节点找不到返回为null

子元素.parentNode

子节点查找:
childNodes
获得所有子节点、包括文本节点(空格、换行)、注节点等

children (重点)
仅获得所有元素节点
返回的还是一个伪数组

父元素.children

兄弟关系查找：

1. 下一个兄弟节点

nextElementSibling 属性

2. 上一个兄弟节点

previousElementSibling 属性

增加节点

很多情况下，我们需要在页面中增加元素, 比如，点击发布按钮，可以新增一条信息。

一般情况下，我们新增节点，按照如下操作：

1. 创建一个新的节点

2. 把创建的新的节点放入到指定的元素内部

1.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

document.createElement（'标签名'）

2.追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素:

父元素.qppendChild(要插入的元素)

插入到父元素中某个子元素的前面

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

示例:

<body><ul><li>1</li><li>3</li></ul><script>//1.创建新的标签节点let ul = document.querySelector('ul')let li = document.createElement('li')li.innerHTML = '2'//2.追加节点 //父元素.appendChild//ul.appendChild(li)//父元素.inserBeforeul.insertBefore(li, ul.children[1])</script>
</body>

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点

把复制的节点放入到指定的元素内部

克隆节点

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法

父元素.removeChild(要删除的元素)

如不存在父子关系则删除不成功

删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

实例化

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

创建一个时间对象并获取时间

获得当前时间

let date = new Date()

获得指定时间

let date = new Date('2024-7-12')

时间对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

时间戳

什么是时间戳?

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

三种方式获取时间戳

1. 使用 getTime() 方法

//1. 实例化
let date = new Date()
//2. 获取时间戳
console.log(date.getTime())

2. 简写 +new Date()

console.log(+new Date())

3. 使用 Date().now()

console.log(Date.now())

无需实例化

但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

重绘和回流(面试常见问题)

1. 浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree)

同时解析（Parser） CSS，生成样式规则 (Style Rules)

根据DOM树和样式规则，生成渲染树(Render Tree)

进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

Display: 展示在页面上

2. 重绘和回流(重排)

回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过

程称为回流。

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、

outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

会导致回流（重排）的操作：

页面的首次刷新

浏览器的窗口大小发生改变

元素的大小或位置发生改变

改变字体的大小

内容的变化（如：input框的输入，图片的大小）

激活css伪类（如：:hover）

脚本操作DOM（添加或者删除可见的DOM元素）

简单理解影响到布局了，就会有回流

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

【零基础】学JS之APIS第四天

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小…...

编程日记 2024/7/14 3:18:23

走进linux

1、为什么要使用linux 稳定性和可靠性： Linux内核以其稳定性而闻名，能够持续运行数月甚至数年而不需要重新启动。这对于服务器来说至关重要，因为它们需要保持长时间的稳定运行，以提供持续的服务安全性： Linux系统…...

编程日记 2024/7/14 3:16:20

智能家居开发新进展：乐鑫 ESP-ZeroCode 与亚马逊 ACK for Matter 实现集成

日前，乐鑫 ESP-ZeroCode 与亚马逊 Alexa Connect Kit (ACK) for Matter 实现了集成。这对智能家居设备制造商来说是一项重大进展。开发人员无需编写固件或开发移动应用程序，即可轻松设计符合 Matter 标准的产品。不仅如此，开发者还可以在短短…...

编程日记 2024/7/14 3:12:16

本地事务和分布式事务

一、本地事务 1、事务的基本特性数据库事务的几个基本特性：原子性、一致性、隔离性、持久性。  原子性：一系列的操作整体不可拆分，要么同时成功，要么同时失败。  一致性：数据在事务的前后，业务整体一…...

编程日记 2024/7/14 3:11:15

昇思25天学习打卡营第14天|基于MindNLP的文本解码原理

基于MindNLP的文本解码原理文本解码文本解码是自然语言处理中的一个关键步骤，特别是在任务如机器翻译、文本摘要、自动回复生成等领域。解码过程涉及将编码器（如语言模型、翻译模型等）的输出转换为可读的文本序列。以下是一些常见的文本解码方法和原理： 1. 自回归解码：…...

编程日记 2024/7/14 3:08:13

Base64文件流查看下载PDF方法-CSDN

问题描述数票通等接口返回的PDF类型发票是以Base64文件流的方式返回的，无法直接查看预览PDF发票， 处理方法使用第三方在线工具：https://www.jyshare.com/front-end/61/ 在Html代码框中粘贴如下代码 <embed type"application/pd…...

编程日记 2024/7/14 3:04:07

基于TCP的在线词典系统(分阶段实现)（阻塞io和多路io复用（select）实现）

1.功能说明一共四个功能： 注册登录查询单词查询历史记录单词和解释保存在文件中，单词和解释只占一行, 一行最多300个字节，单词和解释之间至少有一个空格。 2.功能演示 3、分阶段完成各个功能 3.1 完成服务器和客户端的连接 servic…...

编程日记 2024/7/14 3:03:06

设置DepthBufferBits和设置DepthStencilFormat的区别

1）设置DepthBufferBits和设置DepthStencilFormat的区别 2）Unity打包exe后，游戏内拉不起Steam的内购 3）Unity 2022以上Profiler.FlushMemoryCounters耗时要怎么关掉 4）用GoodSky资产包如何实现昼夜播发不同音乐功能这是…...

编程日记 2024/7/14 3:02:04

MySQL零散拾遗

mysql中大小写敏感吗？ MySQL数据库默认情况下是不区分大小写的，这意味着在查询时，字段名和值的大小写不会影响结果。然而，这种默认行为可能会根据操作系统和配置的不同而有所变化。在某些操作系统上，比如Linux&…...

编程日记 2024/7/14 2:57:59

kali安装vulhub遇到的问题及解决方法（docker及docker镜像源更换）

kali安装vulhub： 提示：项目地址 https://github.com/vulhub/vulhub 项目安装： git clone https://github.com/vulhub/vulhub.git 安装docker 提示：普通用户请使用sudo： 首先安装 https 协议、CA 证书 apt-get in…...

编程日记 2024/7/14 2:56:58

开源数字人项目Hallo

硬件条件： gpu最低12G 软件： cuda需支持 Python选择3.10吧，我的版本3.11 源码： GitHub - fudan-generative-vision/hallo: Hallo: Hierarchical Audio-Driven Visual Synthesis for Portrait Image Animation models文件&…...

编程日记 2024/7/14 2:55:57

Linux 命令集

修改主机名/关机/重启 1）hostnamectl 命令 $ hostnamectl # 查看操作系统信息（内核、操作系统发行版本、主机名等） $ hostnamectl set-hostname redhatu8 # 修改主机名2）shutdown 关机 $ shutdown -h now # 马上关机3&#…...

编程日记 2024/7/14 2:54:57

QML 鼠标和键盘事件

学习目标：Qml 鼠标和键盘事件学习内容 1、QML 鼠标事件处理QML 直接提供 MouseArea 来捕获鼠标事件，该操作必须配合Rectangle 获取指定区域内的鼠标事件, 2、QML 键盘事件处理，并且获取对OML直接通过键盘事件 Keys 监控键盘任意按键应的消…...

编程日记 2024/7/14 2:50:53

WPF引入多个控件库使用

目的设计开发时有的控件库的一部分符合我们想要的UI样式，另一部分来自另一个控件库，想把两种库的样式做一个整合在同一个控件资源上。单纯通过引用的方式会导致原有样式被覆盖。这里通过设置全局样式的方式来实现。 1.安装控件库nuget包：H…...

编程日记 2024/7/14 2:43:46

【Linux】1w详解如何实现一个简单的shell

目录实现思路 1. 交互获取命令行 2. 子串分割解析命令行 3. 指令的判断内建命令 4. 普通命令的执行补充：vim 文本替换整体代码重点思考 1.getenv和putenv是什么意思 2.代码extern char **environ; 3.内建命令是什么 4.lastcode WEXITSTATUS(sta…...

编程日记 2024/7/14 2:38:42

单目测距单目相机测距图片像素坐标转实际坐标的一种转换方案

需要相机位置固定原图红色的点是我们标注的像素点，这些红色的点我们知道它的像素坐标，以及以右下角相机位置为原点的x y 实际坐标数值通过转换，可以得到整个图片内部其余像素点的实际坐标， 这些红色的点是通过转换关系生成的&…...

编程日记 2024/7/14 2:37:40

实验目的要求及拓扑图： 我的拓扑： 更改防火墙和交换机： [USG6000V1-GigabitEthernet0/0/0]ip address 192.168.110.5 24 [USG6000V1-GigabitEthernet0/0/0]service-manage all permit [Huawei]vlan batch 10 20 [Huawei]int g0/0/2 [Huawei-…...

编程日记 2024/7/14 2:32:36

【大模型LLM面试合集】大语言模型基础_Word2Vec

Word2Vec 文章来源：Word2Vec详解 - 知乎 (zhihu.com) 1.Word2Vec概述 Word2Vec是google在2013年推出的一个NLP工具，它的特点是能够将单词转化为向量来表示，这样词与词之间就可以定量的去度量他们之间的关系，挖掘词之间的联系。 …...

编程日记 2024/7/14 2:31:35

图论基础概念（详细讲解)

今天，我们讲解一下图论的概念，首先我们知道图是一个什么东西。图你可以理解成一个网络系统，两个节点之间可能会有边，边链接两个节点，可能是有向（就比如说a只能往b,或者b只能往c)，可能是无向&a…...

编程日记 2024/7/14 2:29:32

未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序报错的解决办法

今天在免费云服务器，三丰云上运行c#或python程序，都提示:未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序，PHP程序就直接乱码，odbc_connect(): SQL error: [Microsoft][ODBC ���&…...

编程日记 2024/7/14 2:22:26

热电效应自发电自行车灯：利用体温实现免充电照明的工程实践

1. 项目概述：从人体体温到自行车灯光你有没有想过，骑自行车时身体散发出的热量，除了让你出汗，还能干点什么？这个项目就是把我们骑车时产生的“废热”，变成照亮前路的灯光。听起来有点像科幻情节&#xff0c…...

编程新知 2026/5/25 14:31:50

跟着 MDN 学CSS day_17：（深入理解溢出机制与容器控制艺术）

在CSS的世界里，一切皆为盒子。当我们精心设定盒子的宽度和高度，试图构建完美的布局时，一个不可避免的问题就会悄然出现：**如果内容超出了盒子的承载能力，会发生什么？**这就是CSS中一个至关重要的概念——溢…...

编程新知 2026/5/25 10:56:15

抖音批量下载终极指南：如何高效自动化获取用户主页全作品

抖音批量下载终极指南：如何高效自动化获取用户主页全作品【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback su…...

编程新知 2026/5/25 10:41:52

RePKG架构深度解析：Wallpaper Engine资源逆向工程与高性能转换方案

RePKG架构深度解析：Wallpaper Engine资源逆向工程与高性能转换方案【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg RePKG是一款专为Wallpaper Engine设计的C#开源工具&a…...

编程新知 2026/5/25 9:36:50

3步快速上手：AMD Ryzen性能调试工具SMUDebugTool完全指南

3步快速上手：AMD Ryzen性能调试工具SMUDebugTool完全指南【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https:/…...

编程新知 2026/5/25 9:20:42

Driver Store Explorer终极指南：快速清理Windows驱动存储的完整教程

Driver Store Explorer终极指南：快速清理Windows驱动存储的完整教程【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer Driver Store Explorer（又称RAPR&#xff09…...

编程新知 2026/5/25 9:08:55