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

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

news 2026/2/11 0:19:10

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



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

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习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第四天

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

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

走进linux

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

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

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

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

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

本地事务和分布式事务

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

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

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

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

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

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

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

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

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

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

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

设置DepthBufferBits和设置DepthStencilFormat的区别

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

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

MySQL零散拾遗

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

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

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

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

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

开源数字人项目Hallo

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

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

Linux 命令集

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

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

QML 鼠标和键盘事件

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

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

WPF引入多个控件库使用

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

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

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

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

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

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

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

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

ensp防火墙综合实验作业+实验报告

实验目的要求及拓扑图&#xff1a; 我的拓扑&#xff1a; 更改防火墙和交换机&#xff1a; [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 文章来源&#xff1a;Word2Vec详解 - 知乎 (zhihu.com) 1.Word2Vec概述 Word2Vec是google在2013年推出的一个NLP工具&#xff0c;它的特点是能够将单词转化为向量来表示&#xff0c;这样词与词之间就可以定量的去度量他们之间的关系&#xff0c;挖掘词之间的联系。 …...

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

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

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

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

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

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

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

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2026/2/2 20:26:17

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

编程新知 2026/2/6 22:46:58

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

编程新知 2026/2/6 8:12:10

RLHF vs RLVR：对齐学习中的两种强化方式详解

在语言模型对齐&#xff08;alignment&#xff09;中&#xff0c;强化学习&#xff08;RL&#xff09;是一种重要的策略。而其中两种典型形式——RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff09; 与 RLVR&#xff08;Reinforcement Learning with Ver…...

编程新知 2026/1/15 4:23:13