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

JavaScript Web APIs第一天笔记

news 文章来源：https://blog.csdn.net/upgrade_bro/article/details/133394584 2025/1/12 12:09:05

在这里插入图片描述

复习：

splice() 方法用于添加或删除数组中的元素。

**注意：**这种方法会改变原始数组。

删除数组：

splice(起始位置，删除的个数)

比如：1

let arr = ['red', 'green', 'blue']
arr.splice(1,1) // 删除green元素
console.log(arr) // ['red, 'blue']

添加元素

splice(起始位置，删除个数，添加数组元素)

let arr = ['red', 'green', 'blue']
//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink
//console.log(arr) // ['red', 'pink', 'green', 'blue']
arr.splice(1, 0, 'pink', 'hotpink') // 在索引号是1的位置添加 pink  hotpink
console.log(arr) // ['red', 'pink', 'hotpink', 'green', 'blue']

Web APIs - 第1天笔记

了解 DOM 的结构并掌握其基本的操作，体验 DOM 的在开发中的作用

知道 ECMAScript 与 JavaScript 的关系
了解 DOM 的相关概念及DOM 的本质是一个对象
掌握查找节点的基本方法
掌握节点属性和文本的操作
能够使用间歇函数创建定时任务

介绍

知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。

严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心是 DOM 和 BOM。

扩展阅读：ECMAScript 规范在不断的更新中，存在多个不同的版本，早期的版本号采用数字顺序编号如 ECMAScript3、ECMAScript5，后来由于更新速度较快便采用年份做为版本号，如 ECMAScript2017、ECMAScript2018 这种格式，ECMAScript6 是 2015 年发布的，常叫做 EMCAScript2015。

关于 JavaScript 历史的扩展阅读。

知道 DOM 相关的概念，建立对 DOM 的初步认识，学习 DOM 的基本操作，体会 DOM 的作用

DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。

简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。

观察一个小例子：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上述的例子中当用户分分别点击【开始】或【结束】按钮后，通过右侧调试窗口可以观察到 html 标签的内容在不断的发生改变，这便是通过 DOM 实现的。

概念

DOM 树

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题</title>
</head>
<body>文本<a href="">链接名</a><div id="" class="">文本</div>
</body>
</html>

如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

DOM 节点

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。
其它…

document

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

<script>// document 是内置的对象// console.log(typeof document);// 1. 通过 document 获取根节点console.log(document.documentElement); // 对应 html 标签// 2. 通过 document 节取 body 节点console.log(document.body); // 对应 body 标签// 3. 通过 document.write 方法向网页输出内容document.write('Hello World!');
</script>

上述列举了 document 对象的部分属性和方法，我们先对 document 有一个整体的认识。

获取DOM对象

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
了解其他方式
1. getElementById
2. getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM - 查找节点</title>
</head>
<body><h3>查找元素类型节点</h3><p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p><ul><li>元素</li><li>元素</li><li>元素</li><li>元素</li></ul><script>const p = document.querySelector('p')  // 获取第一个p元素const lis = document.querySelectorAll('li')  // 获取第一个p元素</script>
</body>
</html>

总结：

document.getElementById 专门获取元素类型节点，根据标签的 id 属性查找
任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型

操作元素内容

通过修改 DOM 的文本内容，动态改变网页的内容。

innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

<script>// innerText 将文本内容添加/更新到任意标签位置const intro = document.querySelector('.intro')// intro.innerText = '嗨~ 我叫李雷！'// intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>

innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

<script>// innerHTML 将文本内容添加/更新到任意标签位置const intro = document.querySelector('.intro')intro.innerHTML = '嗨~ 我叫韩梅梅！'intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>

总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

##操作元素属性

有3种方式可以实现对属性的修改：

常用属性修改

直接能过属性名修改，最简洁的语法

<script>// 1. 获取 img 对应的 DOM 元素const pic = document.querySelector('.pic')// 2. 修改属性pic.src = './images/lion.webp'pic.width = 400;pic.alt = '图片不见了...'
</script>

控制样式属性

应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。

通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 - 修改样式</title>
</head>
<body><div class="box">随便一些文本内容</div><script>// 获取 DOM 节点const box = document.querySelector('.intro')box.style.color = 'red'box.style.width = '300px'// css 属性的 - 连接符与 JavaScript 的 减运算符// 冲突，所以要改成驼峰法box.style.backgroundColor = 'pink'</script>
</body>
</html>

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习 - 修改样式</title><style>.pink {background: pink;color: hotpink;}</style>
</head>
<body><div class="box">随便一些文本内容</div><script>// 获取 DOM 节点const box = document.querySelector('.intro')box.className = 'pink'</script>
</body>
</html>

注意：

1.由于class是关键字, 所以使用className去代替

2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}.active {width: 300px;height: 300px;background-color: hotpink;margin-left: 100px;}</style>
</head><body><div class="one"></div><script>// 1.获取元素// let box = document.querySelector('css选择器')let box = document.querySelector('div')// add是个方法 添加  追加// box.classList.add('active')// remove() 移除 类// box.classList.remove('one')// 切换类box.classList.toggle('one')</script>
</body></html>

操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的跟其他的标签属性没有任何区别

获取:DOM对象.属性名

设置:DOM对象.属性名= 新值


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><input type="text" value="请输入"><button disabled>按钮</button><input type="checkbox" name="" id="" class="agree"><script>// 1. 获取元素let input = document.querySelector('input')// 2. 取值或者设置值  得到input里面的值可以用 value// console.log(input.value)input.value = '小米手机'input.type = 'password'// 2. 启用按钮let btn = document.querySelector('button')// disabled 不可用   =  false  这样可以让按钮启用btn.disabled = false// 3. 勾选复选框let checkbox = document.querySelector('.agree')checkbox.checked = false</script>
</body></html>

自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div data-id="1"> 自定义属性 </div><script>// 1. 获取元素let div = document.querySelector('div')// 2. 获取自定义属性值console.log(div.dataset.id)</script>
</body></html>

间歇函数

知道间歇函数的作用，利用间歇函数创建定时任务。

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

<script>// 1. 定义一个普通函数function repeat() {console.log('不知疲倦的执行下去....')}// 2. 使用 setInterval 调用 repeat 函数// 间隔 1000 毫秒，重复调用 repeatsetInterval(repeat, 1000)
</script>

今日单词

单词	说明	解释
setInterval	定时器	setInterval(repeat, 1000)

JavaScript Web APIs第一天笔记

复习： splice() 方法用于添加或删除数组中的元素。 **注意：**这种方法会改变原始数组。删除数组： splice(起始位置， 删除的个数) 比如：1 let arr [red, green, blue] arr.splice(1,1) // 删除green元素 consol…...

编程日记 2023/10/1 9:38:51

十六.镜头知识之工业镜头的质量判断因素

十六.镜头知识之工业镜头的质量判断因素文章目录十六.镜头知识之工业镜头的质量判断因素1.分辨率(Resolution)2.明锐度(Acutance)3.景深(DOF)：4. 最大相对孔径与光圈系数5.工业镜头各参数间的相互影响关系5.1.焦距大小的影响情况5.2.光圈大小的影响情况5.3.像场中…...

编程日记 2023/10/1 9:33:45

网络协议--概述

1.2 分层网络协议通常分不同层次进行开发，每一层分别负责不同的通信功能。一个协议族，比如TCP/IP，是一组不同层次上的多个协议的组合。 TCP/IP通常被认为是一个四层协议系统，如图1-1所示。每一层负责不同的功能： 1.链…...

编程日记 2023/10/1 9:32:44

aarch64 平台 musl gcc 工具链手动编译方法

目标手动编译一个 aarch64 平台的 musl gcc 工具链 musl libc 与 glibc、uclibc 等，都是标准C 库， musl libc 是基于系统调用之上的标准C 库，也就是用户态的标准C 库。 musl libc 轻量、开源、免费，是一些操作系统的选择，当前 Lite-OS 与 RT-Smart 等均采用自制的 mu…...

编程日记 2023/10/1 9:30:41

计算机图像处理-高斯滤波

高斯滤波高斯滤波是一种线性平滑滤波，适用于消除高斯噪声，广泛应用于图像处理的减噪过程。通俗的讲，高斯滤波就是对整幅图像进行加权平均的过程，每一个像素点的值，都由其本身和邻域内的其他像素值经过加权平均后得到…...

编程日记 2023/10/1 9:29:39

lv5 嵌入式开发-9 信号机制（上）

目录 1 信号机制 2 信号的产生 3 常用信号 4 相关命令 4.1 信号相关命令 kill / killall 4.2 信号发送 – kill / raise 4.3 定时器函数相关函数 – alarm /ualarm/ pause 4.4 信号捕捉：设置信号响应方式 – signal /sigaction，闹钟实现 4.5 子…...

编程日记 2023/10/1 9:26:34

460. LFU 缓存

请你为最不经常使用（LFU）缓存算法设计并实现数据结构。实现 LFUCache 类： LFUCache(int capacity) - 用数据结构的容量 capacity 初始化对象int get(int key) - 如果键 key 存在于缓存中，则获取键的值，否则返回 -1…...

编程日记 2023/10/1 9:24:33

YOLOV8 C++ opecv_dnn模块部署

废话不多说:opencv>4.7.0 opencv编译不做解释，需要的话翻看别的博主的编译教程代码饱含V5,V7,V8部署内容头文件yoloV8.h #pragma once #include<iostream> #include<opencv2/opencv.hpp> using namespace std; using namespace cv; using name…...

编程日记 2023/10/1 9:23:31

STM32 DMA从存储器发送数据到串口

1.任务描述 （1）ds18b20测量环境温度存储到存储器（数组）中。 （2）开启DMA将数组中的内容，通过DMA发送到串口存在问题，ds18b20读到的数据是正常的，但是串口只是发送其低…...

编程日记 2023/10/1 9:21:29

Flask连接数据库返回json数据

常用方法: json.dumps(字典) 将python的字典转换为json字符串json.loads(字符串) 将字符串转换为python中的字典方法一:将python字典转化为json from flask import Flask import jsonapp Flask(__name__)app.route("/index") def index():# 返回json数据的方法…...

编程日记 2023/10/1 9:18:27

Openresty通过Lua+Redis 实现动态封禁IP

求背景为了封禁某些爬虫或者恶意用户对服务器的请求，我们需要建立一个动态的 IP 黑名单。对于黑名单之内的 IP ，拒绝提供服务。并且可以设置失效 1.安装Openresty（编译安装） wget https://openresty.org/download/openresty-1.…...

编程日记 2023/10/1 9:17:26

碎片笔记｜AIGC核心技术综述

前言：AIGC全称为AI-Generated Content，直译为人工智能内容生成。即采用人工智能技术来自动生产内容。AIGC在2022年的爆发，主要是得益于深度学习模型方面的技术创新。不断涌现的生成算法、预训练模型以及多模态等技术的融合引发了AIGC的技术变…...

编程日记 2023/10/1 9:15:22

28385-2012 印刷机械锁线机学习笔记

声明本文是学习GB-T 28385-2012 印刷机械锁线机. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围本标准规定了锁线机的型式、基本参数、要求、试验方法、检验规则、标志、包装、运输与贮存。本标准适用于用线将书帖装订成书芯的锁线机。 …...

编程日记 2023/10/1 9:14:21

【大规模 MIMO 检测】基于ADMM的大型MU-MIMO无穷大范数检测研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/10/1 9:11:16

MySQL数据库记录的删除操作与特殊字符

在数据库管理中，除了添加和修改记录之外，删除操作也是一个重要的方面。同时特殊字符序列的处理也是必不可少的一步。本文将深入探讨如何在MySQL数据库中进行表记录的删除操作，以及如何处理特殊字符序列。将使用《三国志》游戏数据作为示例来进行解释。文章目录表记录的…...

编程日记 2023/10/1 9:09:13

什么是TypeScript

TypeScript是一个开源的编程语言，它是JavaScript的超集。它允许开发人员编写更具可靠性和高效性的代码，同时提供了强类型支持、类、接口、模块等新的特性。TypeScript的代码可以编译成纯JavaScript代码，可以在任何支持JavaScript的平台上运行…...

编程日记 2023/10/1 9:06:10

[docker]笔记-网络故障处理

1、同事在虚拟机上部署docker，发现电脑无法登录虚拟机了。首先ping测是通的，从我电脑继续进行登录测试发现没问题，初步判断是她电脑网络和虚拟机网络之间连接出错。 2、进行虚拟机登录查看，首先使用route -n命令查看路由&#xf…...

编程日记 2023/10/1 9:04:09

牛客网_HJ1_字符串最后一个单词的长度

HJ1_字符串最后一个单词的长度原题思路代码运行截图收获原题字符串最后一个单词的长度思路从最后一个字符开始遍历，遇到第一个空格时的长度即为最后一个单词的长度代码 #include <iostream> #include <string> using namespace std;int main…...

编程日记 2023/10/1 9:02:06

智算创新，美格智能助力智慧支付加速发展

9月21日，以“智算引领创新未来”为主题的紫光展锐2023泛物联网终端生态论坛在深圳举行。作为紫光展锐重要战略合作伙伴，美格智能标准模组产品线总经理郭强华、高级产品总监刘伟鹏受邀出席论坛。美格智能基于紫光展锐5G、4G、智能SoC、Cat.1 bis等芯片平台…...

编程日记 2023/10/1 9:00:04

常用SQL语法总结

1.库操作 1.1.创建数据库 CREATE DATABASE 语句用来创建一个新的数据库。语法：CREATE DATABASE DatabaseName; DatabaseName 为数据库名字，它的名字必须是唯一的，不能和其它数据库重名。 1.2.删除数据库 DROP DATABASE语句用来删除已经…...

编程日记 2023/10/1 8:59:03

Promise击鼓传花的游戏

Promise击鼓传花的游戏 Promise系列导航前言一、学习Promise的原因二、揭开击鼓传花游戏的面纱补充小知识 Promise系列导航 1.Promise本质击鼓传花的游戏 2.Promise四式击鼓 3.Promise击鼓传花 4.Promise花落谁家知多少前言 👨‍💻👨‍&…...

编程日记 2023/10/1 8:58:02

蓝桥杯每日一题2023.9.29

蓝桥杯大赛历届真题 - C&C 大学 B 组 - 蓝桥云课 (lanqiao.cn) 题目描述1 题目分析看见有32位，我们以此为入手点， B代表字节1B 8b b代表位，32位即4个字节 (B) 1KB 1024B 1MB 1024KB (256 * 1024 * 1024) / 4 67108864 故答案…...

编程日记 2023/10/1 8:57:01

Spring Boot的自动装配中的@ConditionalOnBean条件装配注解在Spring启动过程中，是如何保证处理顺序靠后的

前言为什么Spring Boot条件注解那么多，而标题中是ConditionalOnBean呢？ 因为，相比之下我们用的比较多的条件装配注解也就是ConditionalOnClass、ConditionalOnBean了，而ConditionalOnClass对顺序并不敏感（说白了就是判…...

编程日记 2023/10/1 8:53:58

玩转数据-大数据-Flink SQL 中的时间属性

一、说明时间属性是大数据中的一个重要方面，像窗口（在 Table API 和 SQL ）这种基于时间的操作，需要有时间信息。我们可以通过时间属性来更加灵活高效地处理数据，下面我们通过处理时间和事件时间来探讨一下Flink SQL …...

编程日记 2023/10/1 8:52:55

【论文笔记】A Review of Motion Planning for Highway Autonomous Driving

文章目录 I. INTRODUCTIONII. CONSIDERATIONS FOR HIGHWAY MOTION PLANNINGA. TerminologyB. Motion Planning SchemeC. Specificities of Highway DrivingD. Constraints on Highway DrivingE. What Is at Stake in this Paper III. STATE OF THE ARTA. Taxonomy DescriptionB…...

编程日记 2023/10/1 8:51:54

Web APIs - 第1天笔记

介绍

概念

DOM 树

DOM 节点

document

获取DOM对象

操作元素内容

常用属性修改

控制样式属性

操作表单元素属性

自定义属性

间歇函数

今日单词

相关文章：