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

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



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

前言

本栏目是根据黑马程序员的网课来整理的笔记,也会结合我的一些个人见解,来记录自己学习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元素)
简单理解影响到布局了,就会有回流

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/871935.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

喰星云·数字化餐饮服务系统 多处 SQL注入漏洞复现

0x01 产品简介 喰星云数字化餐饮服务系统是一款专为餐饮企业设计的综合性管理软件,旨在通过信息化手段提升餐饮企业的运营效率、降低运营成本,并实现数据驱动的决策管理。该系统包括供应链管理、财务管理、巡店管理、人力资源管理等多个模块,可全面覆盖餐饮企业的日常运营需…

Zynq7000系列FPGA中的DDR内存控制器

DDR内存控制器是一个高度集成的组件&#xff0c;支持多种DDR内存类型&#xff08;DDR2、DDR3、DDR3L、LPDDR2&#xff09;&#xff0c;并通过精心设计的架构来优化内存访问效率。 DDR内存控制器架构 AXI内存端口接口&#xff08;DDRI&#xff09;&#xff1a;该部分负责处理与…

雷赛运动控制卡编程(2)限位设定与回原方式、脉冲模式设置

一、限位开关及急停开关的设置 限位开关的设置 //设置限位开关// dmc_set_el_modeushort _cardNo0;ushort _axisNo 0;ushort _enable 1; // 正负限位使能 ushort _elLogic 0; // 正负限位 低电平 有效ushort _model 0;// 正负限位停止方式为立即停止LTDMC.dmc_set_el_m…

构建实用的NLP应用程序:重塑人类与计算机的协同工作方式

文章目录 一、NLP技术的核心价值二、构建实用NLP应用程序的关键步骤三、NLP应用程序在协同工作中的创新应用《赠ChatGPT中文范例的自然语言处理入门书》编辑推荐内容简介作者简介精彩书评目录前言/序言获取方式 在数字化时代&#xff0c;自然语言处理&#xff08;NLP&#xff0…

手机数据恢复:适用于 Android 的 4 大数据恢复应用程序

没有人希望丢失设备上的重要数据。如果发生这种情况&#xff0c;请不要惊慌。以下是可帮助您恢复丢失或删除的数据的 Android 数据恢复应用程序列表。 有多种方法可以恢复已删除或丢失的 Android 数据&#xff0c;最简单、最快捷的方法是使用第三方恢复应用程序。这些应用程序会…

Transformer模型:Postion Embedding实现

前言 这是对上一篇WordEmbedding的续篇PositionEmbedding。 视频链接&#xff1a;19、Transformer模型Encoder原理精讲及其PyTorch逐行实现_哔哩哔哩_bilibili 上一篇链接&#xff1a;Transformer模型&#xff1a;WordEmbedding实现-CSDN博客 正文 先回顾一下原论文中对Posit…

[Windows] 号称最快免费小巧的远程桌面 AnyDesk v8.0.11单文件版

描述 对于经常在互联网上进行操作的学生&#xff0c;白领等&#xff01; 一款好用的软件总是能得心应手&#xff0c;事半功倍。 今天给大家带了一款高科技软件 虽然 QQ 拥有远程协助功能&#xff0c;但很多时候连接并不够流畅&#xff0c;而且被控电脑那方也必须要有人操作才行…

电脑关机被阻止

1. winR输入regedit进入注册表 2. 选择HKEY_USERS-》.DEFAULT-》Control Panel-》Desktop 3. 右键DeskTop新建字符串值&#xff0c;命名为AutoEndTasks&#xff0c;数值设置为1

C++中链表的底层迭代器实现

大家都知道在C的学习中迭代器是必不可少的&#xff0c;今天我们学习的是C中的链表的底层迭代器的实现&#xff0c;首先我们应该先知道链表的底层迭代器和顺序表的底层迭代器在实现上有什么区别&#xff0c;为什么顺序表的底层迭代器更加容易实现&#xff0c;而链表的底层迭代器…

不会编程怎么办?量化交易不会编程可以使用吗?

量化交易使用计算机模型程序代替人工进行交易&#xff0c;一般需要投资者自己编写程序建模&#xff0c;然后回测无误之后再进行实盘交易&#xff0c;那么不会编程的投资者能使用量化软件进行量化交易吗&#xff1f; 不会编程使用量化软件有两种方法 一种是请人代写代码&#x…

Java软件设计模式-单例设计模式

目录 1.软件设计模式的概念 2.设计模式分类 2.1 创建型模式 2.2 结构型模式 2.3 行为型模式 3.单例设计模式 3.1 单例模式的结构 3.2 单例模式的实现 3.2.1 饿汉式-方式1&#xff08;静态变量方式&#xff09; 3.2.2 懒汉式-方式1&#xff08;线程不安全&#xff09; 3.…

办公灯多普勒雷达模组感应开关,飞睿智能24G毫米波雷达超低功耗uA级,节能LED灯新搭档

在科技日新月异的今天&#xff0c;节能、环保已经成为我们生活和工作中不可或缺的一部分。作为新时代的办公人&#xff0c;我们不仅要追求高效的工作方式&#xff0c;更要关注我们所使用的设备是否足够环保、节能。今天&#xff0c;我们就来聊聊一个令人兴奋的创新——飞睿智能…

如何30分钟下载完368G的Android系统源码?

如何30分钟下载完368G的Android系统源码&#xff1f; Android系统开发的一个痛点问题就是Android系统源码庞大&#xff0c;小则100G,大则&#xff0c;三四百G。如标题所言&#xff0c;本文介绍通过局域网高速网速下载源码的方法。 制作源码mirror 从源码git服务器A&#xff0c…

推荐系统:从协同过滤到深度学习

目录 一、协同过滤&#xff08;Collaborative Filtering, CF&#xff09;1. 基于用户的协同过滤2. 基于物品的协同过滤 二、深度学习在推荐系统中的应用1. 深度学习模型的优势2. 深度学习在推荐系统中的应用实例 三、总结与展望 推荐系统是现代信息处理和传播中不可或缺的技术&…

【话题】破茧而出:打破AI“信息茧房”,捍卫信息自由与多样性

目录 AI发展下的伦理挑战&#xff0c;应当如何应对&#xff1f; 方向一&#xff1a;构建可靠的AI隐私保护机制 方向二&#xff1a;确保AI算法的公正性和透明度 方向三&#xff1a;管控深度伪造技术 AI发展下的伦理挑战&#xff0c;应当如何应对&#xff1f; 在人工智能&…

Tita的OKR:高端制造行业的OKR案例

高端设备制造行业的发展趋势&#xff1a; 产业规模持续扩大&#xff1a;在高技术制造业方面&#xff0c;航空、航天器及设备制造业、电子工业专用设备制造等保持较快增长。新能源汽车保持产销双增&#xff0c;新材料新产品生产也高速增长。 标志性装备不断突破&#xff1a;例如…

Flink Window 窗口【更新中】

Flink Window 窗口 在Flink流式计算中&#xff0c;最重要的转换就是窗口转换Window&#xff0c;在DataStream转换图中&#xff0c;可以发现处处都可以对DataStream进行窗口Window计算。 窗口&#xff08;window&#xff09;就是从 Streaming 到 Batch 的一个桥梁。窗口将无界流…

系统架构师考点--软件工程(上)

大家好。今天我来总结一下软件工程的相关考点。这部分是考试的重点。在上午场客观题、下午场案例题以及下午场论文都有可能考到&#xff0c;在上午场客观题中大约占12-15分左右。 一、软件工程概述 软件开发生命周期 软件定义时期&#xff1a;包括可行性研究和详细需求分析过…

uniapp打包成Android时,使用uni.chooseLocation在App端显示的地址列表是空白?一直转圈的解决办法

问题描述&#xff1a; uniapp打包后的测试版app在ios里可以显示高德地图的定位列表&#xff0c;但是安卓手机却不显示定位列表&#xff0c;一直在转圈圈&#xff0c;怎么回事&#xff1f;之前的功能在正式版都能用&#xff0c;真机运行也能用&#xff0c;为什么测试版的安卓手…

ADC性能规格--动态性能

所有真正的ADC都有额外的噪声源和失真过程&#xff0c;会降低性能。 动态性能规范报告了ADC动态行为中的这些缺陷&#xff0c;包括总谐波失真&#xff08;THD&#xff09;、信噪比加失真&#xff08;SND&#xff09;、信号噪声比&#xff08;SNR&#xff09;和无杂散动态范围&a…