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

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

news 2025/7/10 19:37:06

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



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

前言

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/7/10 5:43:39

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/7/10 2:33:26

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/7/9 12:14:13

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/7/9 8:18:41

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/8 6:05:27

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/8 15:28:22

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/7/10 0:14:18

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/7/6 15:59:45

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/7/10 2:41:40

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2025/7/9 8:51:18