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

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

news 文章来源：https://blog.csdn.net/m0_74948742/article/details/140390655 2025/5/1 15:30:52

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



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

前言

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

《从零开始学习Linux》——开篇

前言 近日笔者新开专栏&#xff0c;《从零开始学习Linux》&#xff0c;Linux水深而且大&#xff0c;学了一圈之后&#xff0c;有懂得有不懂的&#xff0c;一直没有机会整体的全部重新捋一遍&#xff0c;本专栏的目的是&#xff0c;带着大家包括我自己重新学习Linux一遍这些知识…...

编程日记 2024/7/14 2:21:25

3D工艺大师快速生成装配动画，驱动汽车工业装配流程革新

在现代制造业的一般生产流程中&#xff0c;车间装配环节是产品由蓝图迈向市场前至关重要的一道工序。随着产品结构的日益复杂化和个性化需求的不断增长&#xff0c;车间装配工作面临着前所未有的挑战。高精密度的装配要求、错综复杂的组件关系以及频繁变更的生产计划&#xff0…...

编程日记 2024/7/14 2:17:21

gateway

gateway核心概念 1. 路由&#xff08;route) 路由是网关中最基础的部分&#xff0c;路由信息包括一个ID、一个目的URI、一组断言工厂、一组Filter组成。如果断言为真&#xff0c;则说明请求的URL 和 配置的路由匹配。 2. 断言(predicates) 断言函数允许开发者去定义匹配Htt…...

编程日记 2024/7/14 2:15:19

第一个ffmpeg程序

在进行使用ffmpeg进行编写程序时&#xff0c;首先要记得进行注册设备&#xff08;avdevice_register_all &#xff09;&#xff0c;程序运行时&#xff0c;只需要注册一次就可以 avdevice_register_all 是 FFmpeg 多媒体处理库中的一个函数&#xff0c;其作用是注册所有可用的音…...

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

论文翻译：Large Language Models for Education: A Survey and Outlook

https://arxiv.org/abs/2403.18105 目录 教育领域的大型语言模型&#xff1a;一项调查和展望摘要1. 引言2. 教育应用中的LLM2.1 概述2.2 学习辅助2.2.1 问题解决&#xff08;QS&#xff09; 2.2.2 错误纠正&#xff08;EC&#xff09;2.2.3 困惑助手&#xff08;CH&#xff09;…...

编程日记 2024/7/14 2:05:08

python为什么慢？（自用）

《Cython系列》1. Cython 是什么&#xff1f;为什么要有 Cython&#xff1f;为什么我们要用 Cython&#xff1f; - 古明地盆 - 博客园 (cnblogs.com) 古明地盆的主页 - 博客园 (cnblogs.com) 我原本认为&#xff0c;python慢的原因是“逐行解释程序并执行”&#xff0c;那么我…...

编程日记 2024/7/14 2:02:05

压缩感知3——重构算法正交匹配追踪算法

算法流程 问题的实质是&#xff1a;AX Y 求解&#xff08;A是M维&#xff0c;Y是N维且N>>M并且稀疏度K<M&#xff09;明显X有无穷多解&#xff0c;重构过程是M次采样得到的采样值升维的过程。OMP算法的具体步骤&#xff1a;(1)用X表示信号&#xff0c;初始化残差e0 …...

编程日记 2024/7/14 2:01:04

“好物”推荐+Xshell连接实例+使用Conda创建独立的Python环境

目录 主题&#xff1a;好易智算平台推荐RTX 4090DGPU实例租用演示安装配置torch1.9.1cuda11.1.1环境引言&#xff1a;算力的新时代平台介绍&#xff1a;技术与信任的结晶使用案例&#xff1a;实际使用展示创建实例开始使用连接实例&#xff08;下文演示使用Xshell连接&#xff…...

编程日记 2024/7/14 1:58:00

浪潮天启防火墙TQ2000远程配置方法SSL-V偏、L2xx 配置方法

前言 本次设置只针对配置V偏&#xff0c;其他防火墙配置不涉及。建议把防火墙内外网都调通后再进行V偏配置。 其他配置可参考&#xff1a;浪潮天启防火墙配置手册 配置SSLVxx 在外网端口开启SSLVxx信息 开启SSLVxx功能 1、勾选 “启用SSL-Vxx” 2、设置登录端口号&#xff0…...

编程日记 2024/7/14 1:55:58

java八股文面试题

Java八股文面试题通常涵盖了Java语言的基础知识、高级特性、框架应用、数据库操作等多个方面。以下是一些常见的Java面试题及其详细回答&#xff0c;按照不同的主题进行分类&#xff1a; 一、Java基础 面向对象的特征有哪些&#xff1f; 抽象&#xff1a;忽略与当前目标无关的…...

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